這個問題似乎有點相關如何解決鼠標懸停在jQuery重疊的圖像?
- How do I check if the mouse is over an element in jQuery?
- jQuery check hover status before start trigger
,但仍然不大。這是事情:我正在寫一個小畫廊,並在某個時候用戶點擊縮略圖。大圖像顯示爲全屏幕的內部。到現在爲止還挺好。當鼠標懸停時,我會顯示三個圖像:關閉,左側,右側,用於瀏覽相冊;當鼠標離開圖像或導航圖像時,三個導航圖像淡入淡出。
這三個導航圖像與主圖像部分重疊,例如,緊密的圖像是左上角的一個圓圈。這是棘手的部分。
只要鼠標從主圖像從側面移開,或從主圖像移動到三個小的重疊圖像之一,mouseleave就會觸發。按照預期,mouseenter爲每個小的重疊圖像觸發。
但是,這會產生一種時髦的閃爍效果,因爲在主圖像的mouseleave上,我隱藏()三個小圖像,由於重疊,鼠標仍然位於主圖像的頂部,因此立即觸發主圖像的mouseenter主要形象。
爲了避免這種情況,我試圖確定在主圖像的mouseleave上鼠標是否移動到了一個小的重疊圖像上。對於這一點,我用這個代碼:
main_img.mouseleave(function() {
if (!hoverButtons()) {
doHideButtons();
}
});
function hoverButtons() {
return (close_img.is(":hover")) || (left_img.is(":hover")) || (right_img.is(":hover"));
}
這在Safari和Chrome的偉大工程,但不能在FF和IE在圖像仍然閃爍。進一步討論帖子,似乎「:懸停」是這裏的問題,因爲它不是一個合適的選擇器表達式,而是一個CSS僞類?
我嘗試使用開關打開/關閉開關,因爲我mouseenter/mouseleave各種圖像,但這不起作用,因爲事件似乎以不同的順序觸發。
我該如何解決這個問題?謝謝!
編輯:我可能必須澄清:在顯示導航按鈕之前,我設置了它們各自的左側和頂部屬性,以便根據主圖像的位置放置它們。這意味着我需要做一些工作,然後才能在jQuery選擇器上調用.show()。我嘗試添加一個新的函數.placeShow(),但是對於像$(「。nav-button:hidden」)。placeShow()這樣的選擇器來說,這並不起作用。
儘量讓小提琴在http://jsfiddle.net –
試試這個:[http://jsfiddle.net/WVeDs/](http://jsfiddle.net/WVeDs/)它在Safari和Chrome上運行良好,但是在FireFox上的小圖像上懸停,它會像瘋了一樣閃爍。 – Jens
這不僅僅是一個jQuery的問題,這是一個常識性的問題,它使我瘋狂。你會認爲有一些方法可以區分將對象留在內部,而不是將對象留在內部,而將對象留在內部。我非常感謝這個問題的一個通用解決方案。 – puk