在锚元素中查找 img答案

【问题标题】：Finding an img in an anchor element在锚元素中查找 img
【发布时间】：2012-05-08 11:31:22
【问题描述】：

我有一个 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里面的所有东西，但是为什么不抓取图片呢？

【问题讨论】：

【解决方案1】：

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

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

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

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

a.class {
  display:block;
}

【讨论】：