javascript - 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 不是它的 child 。

尝试将 hover 绑定(bind)到 .photo-container。