jQuery mouseout 事件捕获

Question

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

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

在鼠标悬停时，我想在 <li> 中附加一个比 img 更大的 z-index 的 div，这样 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标签和div标签，然后像这样使用css：

ul li div {
  display: none;
}

ul li:hover div{
  display: block;
}

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

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

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

ul li:hover div{
  opacity: 1;
}

Answer 2

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

Answer 3

看看parent()

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