1

我有两张图像，其中一张非常小并且叠加在另一张上。当我将鼠标悬停在较大的图像上时，第二个图像应该出现在它的顶部。这很好用。不幸的是，当我将鼠标移到较小的图像上（请记住，它位于较大的图像之上）时，屏幕会疯狂闪烁。系统认为我正在离开较大的图像，而实际上我并没有。让我发布一些代码。

<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()
    });
    })();

有谁知道如何解决这个问题？

4

1 回答 1

6

光标留下更大的图像，因为.delete-photo不是它的孩子。

尝试绑定hover到.photo-container.

于 2012-09-30T15:33:27.017 回答