2011-12-02 38 views
0

我有一個JQuery的菜單,使用jQuery.addclass和.css展示subnav。我正在添加類並使用mouseover和mouseout來操作css。在Firefox,Chrome和Safari中一切正常,但在IE8中,它似乎在類之間「閃爍」。Jquery鼠標懸停/鼠標懸停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!提前致謝。 :)

+0

什麼是$(「#selector」)? –

+0

#選擇器正在控制導航下方的箭頭。我刪除了處理#selector的其餘代碼,因爲它與隱藏和顯示子菜單沒有任何關係。對困惑感到抱歉。我應該在那裏刪除它。我不希望你們都必須通過大量不相關的代碼。 –

回答

3

問題在於,您正在使用鼠標懸停。當鼠標移過嵌套在頂層LI內的元素時,它實際上不再是「覆蓋」父元素(它覆蓋子元素),所以它發送了鼠標,但鼠標從子元素向上冒泡到父LI ,這使得它閃爍回到它的鼠標懸停狀態。

嘗試查看mouseenter和mouseleave,而不是mouseover和mouseout。

另外,這個問題在除IE之外的瀏覽器中也很明顯 - 我也看到了Chrome,但這是可以預料的。

編輯:只是在Chrome瀏覽器再次看到該頁面,我沒有看到閃爍,不知道如果你改變它,或者它只是圍繞着古怪。無論如何,希望我的回答有幫助。

+0

謝謝德里克,我應該提到我已經嘗試過mouseenter和mouseleave。我遇到同樣的問題。 –

+0

你知道,現在我看得更近了,我注意到閃爍只發生在你的大橫幅圖像轉換到'測試標題3'時......當它在測試標題1或2上時,我沒有看到問題。很可能,導航和圖像滑塊/推子區域之間會發生一些衝突。 –

+0

Darek關於您的修改,您在Chrome上沒有看到閃爍的唯一原因可能是因爲Chrome沒有注意到它太快。但它在那裏,問題與您所描述的完全相同,mouseenter/mouseleave解決了他的問題 –