在锚元素中查找图像

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

我遇到的问题是：悬停效果在悬停文本时有效（SOME TEXT），但是当悬停图像时，不（img.jpg）。有没有理由我为此而失踪？因为a.class应该抓住锚点内的所有东西，但为什么它不抓取图像呢？

Answer 1

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

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

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

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

a.class {
  display:block;
}