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

});