jquery - jQuery mouseout 事件捕获

Question

我通过 load 方法加载了一些图像，如下所示：

<ul>
   <li><img src="1" alt="" /></li>
   <li><img src="2" alt="" /></li>
</ul>

在鼠标悬停时，我想在其中添加一个 div，<li>其 z-index 比 img 大，以便 div 出现在图像的“前面”（就像一个带有图像编辑链接的栏）。在mouseout我希望它消失。问题是这些图像不断变化（通过加载方法加载），我尝试了这样的事情：

$('img').live('mouseover',function(){
    $(this).append('<div>links links</div>');
});

$('img').live('mouseout',function(){
    $('div').remove()
});

实际的问题是当鼠标离开图像区域进入div区域时，div消失并不断出现，所以我无法点击里面的链接。请记住，div 会“超过”图像。

我怎样才能正确地做到这一点？

Answer 1

根据您的浏览器兼容性要求，您可以使用 :hover 对 css 执行此操作。

在标记中包含你想要的img标签和标签，然后像这样使用 css：div

ul li div {
  display: none;
}

ul li:hover div{
  display: block;
}

对于 div 在 img 标签上的定位，它实际上取决于页面布局的其余部分。如果图像始终是相同的尺寸，您可以使用负边距偏移和 div 的像素定位。

如果您使用 opacity 设置，您还可以在基于 webkit 的浏览器上实现一些不错的淡入淡出效果：

ul li div {
  opacity: 0;
  -webkit-transition: opacity .33s linear;
}

ul li:hover div{
  opacity: 1;
}

Answer 2

看看父母（）

http://docs.jquery.com/Traversing/parent

编辑：父母不适用于现场，我的错。这个怎么样：

$('li').live('mouseover',function(){
    $(this).children().hide();
    $(this).append('<div>links links</div>');
});

$('li').live('mouseout',function(){
    $('div').remove();
    $(this).children().show();
});

Answer 3

将您的事件绑定到li而不是img. 这样，mouseout 事件只会在光标离开div和时触发img。