Question

我使用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>

谢谢！

Answer 1

你根本不需要任何jQuery或Javascript代码。

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

您可能添加了代码以解决:hover在IE6中无法正常工作的问题，但您不需要此代码;只需使用其中一个IE6悬停黑客，例如Whatever:hover。

所以你需要的就是这个CSS：

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

...加上Whatever：Hover网站上描述的behavior风格，它可以在所有浏览器中精美地运行，不需要任何Javascript代码。

（好吧，是的，无论如何：hover是用Javascript编写的，所以从技术上来说有一些JS代码，但只在IE6中，它不受其他代码的影响，而且任何其他浏览器都看不到它）

我使用Jquery addClass（）来改变背景，但它在IE6中不起作用

1 个答案: