jQuery CSS 将图像放在图像上变成频闪灯

Question

我有一个图片库。

有一个拇指列表。当您将鼠标悬停在图像上时，会出现一个红色 x，允许您删除该图像。

我的问题是，当您将鼠标悬停在 x 上时，它会闪烁。我假设它认为当 x div 出现时，它认为这是一个 mouseout 事件，因此将其隐藏。

有更好的方法吗？

http://jsfiddle.net/guyfromfl/7ZNGY/1/

x 在我的布局上正确排列，而不是在 jsfiddle 中，但尝试修复并不是什么大问题...

Answer 1

在不修改 HTML 结构的情况下，您需要使用 mouseenter mouseleave 事件，如下所示:

http://jsfiddle.net/7ZNGY/3/

mouseout 仅考虑绑定(bind)元素的目标，因此，如果您将鼠标悬停在容器内，它将被视为“mouseout”，而 mouseleave 则理解仅离开该容器被视为“鼠标移出”

因此，当您将鼠标悬停在 X 按钮上时，它会被视为隐藏元素的“鼠标悬停”，并且您现在位于触发 mouseover 的普通容器中，并且此循环会导致频闪效果

编辑代码:

$(document).delegate('.preview_image', 'mouseenter mouseleave', function (event) {
    var eId = $(this).find("img").get(1).id;
    var id = eId.replace("preview_", "");
    if (event.type == 'mouseenter') {
        $('#delete_img_' + id).fadeIn(100);
    } else {
        $('#delete_img_' + id).fadeOut(100);
    }
});
$(document).delegate('.delete_container', 'click', function () {
    alert("You dirty rat");
});