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。