在錨元素中查找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); 
}); 

我的問題是：徘徊在文本（SOME TEXT）時，懸停效果的工作原理，但是當它懸停圖像（img.jpg）時，它不會不會。是否有我失蹤的原因？因爲a.class應該抓住錨內的所有東西，但爲什麼它不抓住圖像呢？

Answer 1

我很好奇你在哪裏閱讀使用srcElement，因爲當事件對象綁定到window對象時，這是舊版Internet Explorer中使用的屬性。如果您想獲取調用even的元素，則應使用e.target或this（儘管this根據使用位置更改引用）。

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

請記住，a元素不是塊級別的元素。它只會大約20px左右。在下面的圖片我已經改變了錨的背景顏色爲淺綠色：

正如你所看到的，而「一些文本」和大的小貓的圖像在技術上嵌套錨內，他們不在其邊界之內。如果我們將其顯示阻攔，我們可以改變這一點：

a.class { 
    display:block; 
}