jQuery的選擇當前元素

Question

我在我的網站至少有兩個「消息盒子」，使用如下代碼：

<a class="newsbox" href="#"><span>TITLE</span><div>read more</div></a> 
<a class="newsbox" href="#"><span>TITLE</span><div>read more</div></a> 

有了這個代碼，我躲在這個錨標記上的「更多」：

jQuery("a.newsbox div").hide(); 

它工作正常。

現在我想讓「閱讀更多」僅在當前懸停的新聞框中可見。

我嘗試使用此代碼：

jQuery("a.newsbox").hover(function() { 
    jQuery(this).hover(function() { 
     jQuery("div").fadeIn(); 
    }); 
}); 

但這是與類「NewsBox中」所有錨標籤。我怎樣才能選擇當前元素，並只顯示當前懸停元素的「read more」？

Answer 1

嘗試是這樣的：

$('a.newsbox').hover(function(){ 
    $(this).find('div').fadeToggle(); 
}); 

使用fadeToggle， 「更多」 也將自身隱藏鼠標移開。

Answer 2

jQuery("a.newsbox").hover(function() { 
    jQuery(this).find('div').fadeIn(); 
}); 

Answer 3

jQuery('div')正在選擇頁面上的所有div元素。你需要給它的上下文...

jQuery("a.newsbox").hover(function() { 
    jQuery("div", this).fadeIn(); 
}); 

見http://api.jquery.com/jQuery/

Answer 4

試試這個代碼：

jQuery('a.newsbox').hover(function(){ 

    jQuery(this).children('div').fadeIn(); 

});