0

jquery .addclass と .css を使用してサブナビを表示する Jquery メニューがあります。クラスを追加し、マウスオーバーとマウスアウトで css を操作しています。Firefox、Chrome、および Safari ではすべて正常に動作しますが、IE8 ではクラス間で「ちらつき」があるようです。

説明するのは難しいですが、FF と IE で私のリンクを見れば、私の言いたいことがわかるでしょう。

http://trustmarkstaging.com/

これが私のjQueryです：

<script>

$(document).ready(function(){

$("#nav .item-466").mouseover(function(){
 $("#selector").addClass("item-466-selector");
 $("#nav .menu .current ul li").css("display", "none");
 $("#nav .menu .active ul li").css("display", "none");
 $("#nav .menu .item-466 ul li").addClass("highlight");
});
$("#nav .item-466").mouseout(function(){
 $("#selector").removeClass("item-466-selector");
 $("#nav .menu .current ul li").css("display", "inline");
 $("#nav .menu .active ul li").css("display", "inline");
 $("#nav .menu .item-466 ul li").removeClass("highlight");
});

 $("#nav .item-470").mouseover(function(){
 $("#selector").addClass("item-470-selector");
 $("#nav .menu .current ul li").css("display", "none");
 $("#nav .menu .active ul li").css("display", "none");
 $("#nav .menu .item-470 ul li").addClass("highlight");
});
 $("#nav .item-470").mouseout(function(){
 $("#selector").removeClass("item-470-selector");
 $("#nav .menu .current ul li").css("display", "inline");
  $("#nav .menu .active ul li").css("display", "inline");
 $("#nav .menu .item-470 ul li").removeClass("highlight");
});
$("#nav .item-472").mouseover(function(){
 $("#selector").addClass("item-472-selector");
 $("#nav .menu .current ul li").css("display", "none");
 $("#nav .menu .active ul li").css("display", "none");
 $("#nav .menu .item-472 ul li").addClass("highlight");
});
$("#nav .item-472").mouseout(function(){
 $("#selector").removeClass("item-472-selector");
 $("#nav .menu .current ul li").css("display", "inline");
  $("#nav .menu .active ul li").css("display", "inline");
 $("#nav .menu .item-472 ul li").removeClass("highlight");
});

$("#nav .item-473").mouseover(function(){
 $("#selector").addClass("item-473-selector");
 $("#nav .menu .current ul li").css("display", "none");
 $("#nav .menu .active ul li").css("display", "none");
   $("#nav .menu .item-473 ul li").addClass("highlight");
});
$("#nav .item-473").mouseout(function(){
 $("#selector").removeClass("item-473-selector");
 $("#nav .menu .current ul li").css("display", "inline");
 $("#nav .menu .active ul li").css("display", "inline");
 $("#nav .menu .item-473 ul li").removeClass("highlight");
});

$("#nav .item-474").mouseover(function(){
 $("#selector").addClass("item-474-selector");
 $("#nav .menu .current ul li").css("display", "none");
 $("#nav .menu .active ul li").css("display", "none");
 $("#nav .menu .item-474 ul li").addClass("highlight");
});
$("#nav .item-474").mouseout(function(){
 $("#selector").removeClass("item-474-selector");
 $("#nav .menu .current ul li").css("display", "inline");
 $("#nav .menu .active ul li").css("display", "inline");
 $("#nav .menu .item-474 ul li").removeClass("highlight");
});
});

</script>

私のCSS：

<style>
#nav .menu li {
list-style: none;
display: inline;
float: left;
border-radius: 10px;
padding: 10px 16px;
margin-left: 3px;
}

.highlight {
display: inline!important;
}
</style>

HTML は次のような構造になっています。

<ul id="nav">
<li class="item-466 active">Page 1</li>
    <ul>
        <li>SubPage1</li>
        <li>SubPage2</li>
        <li>SubPage3</li>
    </ul>
<li class="item-470">Page 2</li>
<li class="item-472">Page 3</li>
<li class="item-473">Page 4</li>
</ul>

どんな助けでも大歓迎です！前もって感謝します。:)

4

1 に答える 1

3

問題は、マウスオーバーを使用しているという事実にあります。マウスが最上位の LI 内にネストされた要素の上に移動すると、実際には親要素 (子の上) の「上」ではないため、マウスアウトを送信しますが、マウスオーバーは子要素から親の LI にバブルアップします。 、マウスオーバー状態にちらつきます。

mouseover と mouseout ではなく、mouseenter と mouseleave を調べてみてください。

また、この問題は IE 以外のブラウザでも明らかです。Chrome でも見られますが、これは予想されることです。

編集: Chrome でページをもう一度見たところ、ちらつきが見られません。変更したのか、それとも風変わりなだけなのかわかりません。とにかく、私の答えが役に立てば幸いです。

于 2011-12-02T18:21:30.047 に答える