jQuery.hover導致閃爍效果

Question

我有兩個圖像，其中一個非常小，疊加在另一個上面。當我將鼠標懸停在較大的圖像上時，第二個圖像應顯示在其上方。這很好。不幸的是，當我將鼠標移動到較小的圖像上（記住，它位於較大圖像的頂部）時，屏幕閃爍不定。該系統認爲我實際上沒有留下更大的圖像。讓我發表一些代碼。

<li id="li-{{ photo.id }}"> 
    <div class="photo-container"> 
     <img class="photo" src="{{ photo.thumbnailFile.url }}"/> 
     <img class="delete-button" src="{{ STATIC_URL }}delete_photo.jpg "/> 
    </div> 
</li> 

function DisplayPhotoOptions() { 
$("#personal-photo-list .photo").hover(function(event) { 
    $(this).fadeTo("fast", 0.5); 
    $(this).next(".delete-button").css("visibility", "visible"); 
}, function() { 
    $(this).fadeTo("fast", 1.0); 
    $(this).next(".delete-button").css("visibility", "hidden"); 
}); 

(function() { 
    $(document).ready(function() { 
     DisplayPhotoOptions() 
    }); 
    })(); 

有誰知道如何解決這個問題？

Answer 1

光標留下較大的圖像，因爲.delete-photo不是它的孩子。

嘗試綁定hover至.photo-container。