Jquery Select 电流元件

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

但这适用于所有带有 class “新闻框”的锚标签。 我怎样才能 select 当前元素只显示当前悬停元素的“阅读更多”？

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

});