我使用 Jquery addClass() 更改背景，但在 IE6 中不起作用答案

【问题标题】：I use Jquery addClass() to change background, but it's not work in IE6我使用 Jquery addClass() 更改背景，但在 IE6 中不起作用
【发布时间】：2012-05-27 10:38:59
【问题描述】：

我使用Jquery addClass() 方法在鼠标悬停时更改DIV的背景，但是为什么它在IE6中不起作用，但是字体颜色发生了变化。网址：http://www.wfuns.com/soiseek

CSS：

#container #index_sidebar .mycats .item{
   width:200px;
   height:auto;
   overflow:hidden;
   padding:8px 10px 12px 10px;
   *padding:8 0 12px;/*IE7*/
   position:relative;
   z-index:200;
   background:#59a818 url(../img/icons/menu_icon.png) no-repeat 179px -27px;
   border-bottom:1px solid #78c03d;
}
/*Hover*/
#container #index_sidebar .mycats .hover_bg{
   background:#fff;
}
#container #index_sidebar .mycats .hover_bg a{
   color:#59a818;
}

Jquery：

 $('#index_sidebar .mycats .item').bind({
       mouseover: function() {
        $(this).addClass("hover_bg");
      },
      mouseout: function() {
        $(this).removeClass("hover_bg"); 
      }
    });

HTML：

<div id="index_sidebar">
      <div class="mycats">
        <div class="item"><a href="#" class="parent">Category</a>
          <p class="sub_cats"><a href="#">NXP</a> <a href="#">ABB</a> <a href="#">CTS</a></p>
        </div>
        <div class="sub_menu">
          <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
        </div>
      </div>
</div>

谢谢！

【问题讨论】：

一般经验法则；就像您精心设计您的样式一样，它们仍然无法在 IE6 中工作。为什么还支持它？
您在演示中缺少#container，而不是</div> 和...在我添加了它在IE 中工作的所有内容之后。（我的意思是 IE6）
不要忘记在 Firefox 1.0 上进行测试，它是在 IE 6 之后几年发布的；）有些东西最好放在角落里静静地死去。
更正 HTML 后它应该可以工作。在末尾添加另一个</div>。
这在 Netscape Navigator 1.22 中不起作用

标签： jquery hover internet-explorer-6

【解决方案1】：

您真的根本不需要任何 jQuery 或 Javascript 代码。

您只需要了解 CSS :hover 功能，它完全可以完成您在此处尝试执行的操作，而无需所有代码。

您可能添加了代码来解决 :hover 在 IE6 中无法正常工作的事实，但您不需要此代码；只需使用其中一种 IE6-hover hack，例如 Whatever:hover。

所以你只需要这个 CSS：

#container #index_sidebar .mycats .item:hover {
    background:#fff;
}
#container #index_sidebar .mycats .item:hover a {
    color:#59a818;
}

...加上 What:Hover 网站上描述的 behavior 样式，它可以在所有浏览器中完美运行，无需任何 Javascript 代码。

（好吧，是的，Whatever:hover 是用 Javascript 编写的，所以从技术上讲，有一些 JS 代码，但仅在 IE6 中，它与您的其余代码无关，而且任何其他浏览器都看不到它)

【讨论】：

这里的重点是IE6不支持所有元素上的:hover（仅<a> IIRC）
感谢您的回答，我使用 What:hover 但在 IE6 中仍然没有背景色。
@steveax - 另一个重点是Whatever:hover 在 IE6 中解决了这个问题。
@BadJohnny - 您能否向我们展示您编辑的包含 What:hover 代码的 CSS，并确认 What:hover 脚本文件在您的站点中。
但是没有任何改善。我认为 CSS 可能不兼容 IE6？