Jquery鼠标悬停/鼠标悬停IE8波动

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> 

任何帮助将是的欣赏ED！提前致谢。 :)

Answer 1

问题在于，您正在使用鼠标悬停。当鼠标移过嵌套在顶层LI内的元素时，它实际上不再是“覆盖”父元素（它覆盖子元素），所以它发送了鼠标，但鼠标从子元素向上冒泡到父LI ，这使得它闪烁回到它的鼠标悬停状态。

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

另外，这个问题在除IE之外的浏览器中也很明显 - 我也看到了Chrome，但这是可以预料的。

编辑：只是在Chrome浏览器再次看到该页面，我没有看到闪烁，不知道如果你改变它，或者它只是围绕着古怪。无论如何，希望我的回答有帮助。