Question

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

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

在鼠标悬停时，我想在<li>内附加一个div，其中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。

在标记中包含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

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

Answer 3

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

jQuery mouseout事件捕获

3 个答案: