1

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

查询：

 $('#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>

谢谢！

4

1 回答 1

1

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

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

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

所以你只需要这个 CSS：

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

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

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

于 2012-05-20T19:56:54.733 回答