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。

jQuery.hover导致闪烁效果

1 个答案: