jquery - 在 anchor 元素中查找 img

Question

我有一个 jQuery 脚本，将鼠标悬停在某个 anchor 上，找到其中的跨度并显示它。所以 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);
});

我遇到的问题是:悬停效果在悬停文本(SOME TEXT)时起作用，但在悬停图像(img.jpg)时不起作用。我失踪有什么原因吗？因为 a.class 应该抓取 anchor 内的所有内容，但为什么它不抓取图像？

Answer 1

我很好奇您在哪里阅读到使用 srcElement，因为这是旧版本 Internet Explorer 中事件对象绑定(bind)到 window 对象时使用的属性。如果您想获取首先调用事件的元素，您应该使用 e.target 或 this (尽管 this 会发生变化)引用取决于它的使用位置)。

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

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

正如您所看到的，虽然“SOME TEXT”和大猫咪图像在技术上嵌套在 anchor 内，但它们落在其边界之外。如果我们将其显示设置为阻止，我们可以更改此设置:

a.class {
  display:block;
}