0

我有一个使用 jquery .addclass 和 .css 显示 subnav 的 Jquery 菜单。我正在添加类并使用 mouseover 和 mouseout 操作 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 中的元素时，它实际上不再“越过”父元素（它越过子元素），因此它发送 mouseout，但鼠标悬停从子元素冒泡到父元素 LI ，这使它闪烁回到它的鼠标悬停状态。

尝试查看 mouseenter 和 mouseleave，而不是 mouseover 和 mouseout。

此外，这个问题在 IE 以外的浏览器中也很明显——我也在 Chrome 中看到它，但这是意料之中的。

编辑：刚刚在 Chrome 中再次查看该页面，我没有看到闪烁，不确定您是否更改了它，或者它只是古怪。总之，希望我的回答对你有帮助。

于 2011-12-02T18:21:30.047 回答