Question

我有一个Jquery菜单，它使用jquery .addclass和.css来显示subnav。我正在添加类并使用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>

任何帮助将不胜感激！提前致谢。：）

Answer 1

问题在于你正在使用鼠标悬停。当鼠标越过嵌套在顶层LI中的元素时，它实际上不再“超过”父元素（它在子元素上），因此它发送mouseout，但是鼠标从子元素向上冒泡到父元素LI ，这使它闪回到它的鼠标悬停状态。

尝试查看mouseenter和mouseleave，而不是鼠标悬停和mouseout。

此外，问题在IE浏览器以外的其他浏览器中也很明显 - 我也看到Chrome也是如此，但这是可以预料的。

编辑：只是在Chrome浏览器中再次查看该页面，我没有看到闪烁，不确定您是否更改了它，或者它只是在古怪的周围。无论如何，希望我的回答有所帮助。

Jquery mouseover / mouseout IE8波动

1 个答案: