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仅考虑绑定元素的目标，因此如果您将某些内容悬停在容器内，则会将其视为“mouseout”，而mouseleave会理解只留下容器的数量计为“鼠标移开”

所以当你在X按钮上方盘旋时，它会被视为一个隐藏元素的“mouseout”，你现在处于触发mouseover的普通容器中，这个循环会导致strobo效果

修改代码：

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

Answer 2

你的小提琴是不完整的，但是我想你会在img元素上悬停。而是将图像放在另一个将捕获click事件的容器中。红色x也应该是这个容器的一部分。这样，即使红色x位于图像上，它也不会窃取焦点并移除悬停。

<span class="imgcontainer">
  <img src="" />
  <img src="redx" position:absolute; top: 0; right: 0; />
</span>

$('imgcontainer').hover()...

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

2 个答案: