1

我有一个 CMS，它生成如下列表：

<div class="span-feed">
<div class="project-thumb"><img src="..." /></div>
<div class="info-overlay"><h1>Something</h1></div>
</div><!--.span-feed-->

我希望隐藏 info-overlay 类并仅在用户将鼠标悬停在缩略图上时才可见。单个缩略图很容易实现，但是当生成的列表中有多个项目时，悬停效果会在所有缩略图上触发，这在逻辑上是正确的，但我不希望这种情况发生。我是一个 jQuery 菜鸟，请建议我如何将效果一次限制为一个缩略图。我只希望在用户悬停的缩略图上触发效果。

编辑：CMS 正在生成一个 ul 列表，如下所示：

<ul>
<li><div class="span-feed">
<div class="project-thumb"><img src="..." /></div>
<div class="info-overlay"><h1>Something</h1></div>
</div><!--.span-feed--></li>

<li><div class="span-feed">
<div class="project-thumb"><img src="..." /></div>
<div class="info-overlay"><h1>Something</h1></div>
</div><!--.span-feed--></li>

<li><div class="span-feed">
<div class="project-thumb"><img src="..." /></div>
<div class="info-overlay"><h1>Something</h1></div>
</div><!--.span-feed--></li>

</ul>

jQuery如下：

$('.project-thumb').mouseover(function(){
    $('.info-overlay').fadeIn("slow");
});

$('.project-thumb').mouseout(function(){
    $('.info-overlay').fadeOut();
});

谢谢你的时间。

编辑：谢谢@NimChimpsky 和@Simon，我已经成功了 :)

4

2 回答 2

2 
$('.project-thumb').hover(function(){
    $(this).next('.info-overlay').fadeIn("slow");
  }, function(){
    $(this).next('.info-overlay').fadeOut();
  });

将悬停功能与下一个选择器一起使用。

于 2012-07-09T10:19:25.400 回答
0

您可以使用这个 next，它选择与选择器匹配的下一个元素。

$('.project-thumb').mouseover(function(){
    $(this).next('.info-overlay').fadeIn("slow");
});

$('.project-thumb').mouseout(function(){
    $(this).next('.info-overlay').fadeOut();
});
于 2012-07-09T10:18:34.757 回答