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瀏覽器再次看到該頁面，我沒有看到閃爍，不知道如果你改變它，或者它只是圍繞着古怪。無論如何，希望我的回答有幫助。