1

JqueryのaddClass（）メソッドを使用して、マウスが上にあるときにDIVの背景を変更しますが、IE6で機能しない理由は、フォントの色が変更されているためです。URL：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>

ありがとう！

4

1 に答える 1

1

これには、jQueryまたはJavascriptコードはまったく必要ありません。

CSS機能について知っておく必要があり:hoverます。この機能は、すべてのコードを必要とせずに、ここで実行しようとしていることを正確に実行します。

:hoverIE6で正しく機能しないという事実を回避するためにコードを追加した可能性がありますが、このコードは必要ありません。Whatever：hoverなどのIE6ホバーハックの1つを使用するだけです。

したがって、必要なのはこのCSSだけです。

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

...さらに、behaviorWhatever：Hoverサイトで説明されているスタイルを使用すると、Javascriptコードがなくても、すべてのブラウザーで美しく機能します。

（はい、Whatever：hoverはJavascriptで記述されているため、技術的にはJSコードがいくつかありますが、IE6でのみ、残りのコードの邪魔にならず、他のブラウザーでも表示されません）

于 2012-05-20T19:56:54.733 に答える