jQuery CSS把圖像放在圖像上變成閃光燈

Question

我有一個圖像庫。

有一個拇指列表。將鼠標懸停在圖像上時，會出現一個紅色的x，允許您刪除該圖像。

我的問題是，當你懸停在它上面時，x閃爍。我假設它看到x div出現時，它認爲這是一個鼠標事件，因此隱藏它。

有沒有更好的方法來做到這一點？

http://jsfiddle.net/guyfromfl/7ZNGY/1/

的X線正確對我的佈局，而不是在的jsfiddle，但它不是什麼大不了的事，試圖修復...

Answer 1

無需修改HTML結構，則需要使用mouseentermouseleave事件，像這樣：

http://jsfiddle.net/7ZNGY/3/

mouseout只考慮你的綁定元素的目標，因此，如果您將鼠標懸停在容器裏面的東西它會算作一個「老鼠」，而mouseleave明白，只有離開容器算作一個「鼠標」

所以當你h紅色在X按鈕，它計數爲「鼠標移出」，這隱藏了元素，你現在在其觸發mouseover平原容器，而這種循環使頻閃效應

編輯代碼：

$(document).delegate('.preview_image', 'mouseenter mouseleave', function (event) { 
    var eId = $(this).find("img").get(1).id; 
    var id = eId.replace("preview_", ""); 
    if (event.type == 'mouseenter') { 
     $('#delete_img_' + id).fadeIn(100); 
    } else { 
     $('#delete_img_' + id).fadeOut(100); 
    } 
}); 
$(document).delegate('.delete_container', 'click', function() { 
    alert("You dirty rat"); 
}); 

Answer 2

你的小提琴是不完整的，但我想你綁定到懸停在img元素上。相反，將圖像放入另一個容器中，該容器將捕獲單擊事件。紅色的x也應該是這個容器的一部分。這樣即使紅色x位於圖像上，它也不會竊取焦點並移除懸停。

<span class="imgcontainer"> 
    <img src="" /> 
    <img src="redx" position:absolute; top: 0; right: 0; /> 
</span> 

$('imgcontainer').hover()...