我有一个图片库。
有一个拇指列表。当您将鼠标悬停在图像上时,会出现一个红色 x,允许您删除该图像。
我的问题是,当您将鼠标悬停在 x 上时,它会闪烁。我假设它认为当 x div 出现时,它认为这是一个 mouseout 事件,因此将其隐藏。
有更好的方法吗?
http://jsfiddle.net/guyfromfl/7ZNGY/1/
x 在我的布局上正确排列,而不是在 jsfiddle 中,但尝试修复并不是什么大问题...
最佳答案
在不修改 HTML 结构的情况下,您需要使用 mouseenter
mouseleave
事件,如下所示:
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");
});
关于jQuery CSS 将图像放在图像上变成频闪灯,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8171716/