jquery - 在锚元素中查找 img

Question

我有一个 jQuery 脚本，它悬停在某个锚点上，找到其中的跨度并显示它。所以 HTML 结构类似于：

<a class="class" href="#">
  <img src="img.jpg"/> 
     <p>SOME TEXT</p>
  <span class="class2">
     <p>SOME CONTENT</p>
  </span>
</a>

显示它的脚本类似于：

$('a.class').live('mouseover', function (e) {
   $(e.srcElement).find('.class2').fadeTo('slow', 1);
});

我遇到的问题是：悬停效果在悬停文本（某些文本）时有效，但在悬停图像时不起作用（img.jpg）。我为此失踪有什么原因吗？因为a.class应该抓取anchor里面的所有东西，但是为什么不抓取图片呢？

Answer 1

我很好奇你在哪里阅读使用srcElement，因为这是在事件对象绑定到window对象时在旧版本的 Internet Explorer 中使用的属性。如果您想获取调用 even 的元素，您应该使用e.target, or this（尽管this根据使用位置更改引用）。

$("a.class").on("mouseenter", function(){
  $(".class2", this).fadeTo("slow", 1);
});

请记住，该a元素不是块级元素。它只有大约 20px 高左右。在下图中，我将锚点的背景颜色更改为浅绿色：

如您所见，虽然“SOME TEXT”和大猫图像在技术上嵌套在锚点内，但它们超出了其边界。如果我们将其显示设置为阻止，我们可以更改：

a.class {
  display:block;
}