Question

我有一个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 noob，请建议我如何一次将效果限制为单个缩略图。我只希望在缩略图用户悬停时触发效果。

编辑：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＆amp; @Simon，我已经有了它的工作：）

Answer 1

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

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

Answer 2

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

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

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

如何一次只将jquery效果应用于一个元素，而不是整个列表？

2 个答案: