如何解決鼠標懸停在jQuery重疊的圖像？

Question

這個問題似乎有點相關

• 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（）這樣的選擇器來說，這並不起作用。

Answer 1

你可以用這個嘗試：

$("#main, #small").mouseenter(function() { 
    $("#small:hidden").show(); 
}).mouseleave(function(e) { 
    if(e.target.id != 'main' || e.target.id != 'small') { 
     $('#small').hide(); 
    } 
}); 

DEMO

Answer 2

這裏是我落得這樣做。我在幻燈片中使用了四個圖像：主圖像，然後左，右，關閉按鈕圖像。

main_img = $("<img ... class='main-photo slide-show'/>"); 
close_img = $("<img ... class='nav-button slide-show'/>"); 
left_img = $("<img ... class='nav-button slide-show'/>"); 
right_img = $("<img ... class='nav-button slide-show'/>"); 

這裏的類基本上是空的，但幫助我根據上面的答案進行選擇。然後，將主圖像示出了沒有導航按鈕，和附上這些事件處理功能：

$(".slide-show").mouseenter(function() { 
    $(".photo-nav:hidden").placeShow(); 
}); 
$(".slide-show").mouseleave(function() { 
    $(".photo-nav").hide(); 
}); 

其中placeShow（）移動導航按鈕到它們各自的位置。該函數定義如下：

$.fn.placeShow = function() { 
    var pos = main_img.position(); 
    var left = pos.left; 
    var top = pos.top; 
    var width = main_img.width(); 
    var height = main_img.height(); 

    close_img.css({ "left":"" + (left-15) + "px", "top":"" + (top-15) + "px" }).show(); 
    left_img.css({ "left":"" + (left+(width/2)-36) + "px" , "top": "" + (top+height-15) + "px" }).show(); 
    right_img.css({ "left":"" + (left+(width/2)+3) + "px", "top":"" + (top+height-15) + "px" }).show(); 
} 

這個工作至今的Safari瀏覽器，IE，FF，鉻（當然，我在這裏得到了版本...）

讓我知道你在想什麼，如果我可以更多地修改這些代碼，或者如果有更好的/快速的替代解決方案。所有這些的最終結果現在在我的網站上。

延