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>

使用此代码，我在此锚标记中隐藏“read more”：

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

工作正常。

现在我想让“阅读更多”仅在当前悬空的新闻框中可见。

我尝试使用此代码：

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

但是对于所有带有“newsbox”类的锚标签。如何选择当前元素并仅显示当前悬停元素的“读取更多”？

Answer 1

尝试这样的事情：

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

使用fadeToggle，“read more”也会在mouseout上隐藏。

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

});