Question

请检查以下代码。它是一个自动生成的代码。我希望仅将fadeIn（）效果应用于“thumb-info”类。

<div class="work-thumbs">
<article>
<div class="thumb"><img src="1.jpg" /></div>
<div class="thumb-info">Link #1 - Heading #1</div>
</article>

<article>
<div class="thumb"><img src="2.jpg" /></div>
<div class="thumb-info">Link #2 - Heading #2</div>
</article>
</div><!--/.work-thumbs-->

我编写了如下jQuery代码，但它适用于列表中的所有元素。

$('.thumb').mouseenter(function(){
$('thumb-class').fadeIn('slow');
});

我希望它仅适用于光标暂时停留的元素。

感谢您的时间。

编辑：感谢您的回答，但“拇指信息”是一个隐藏的元素，而“。拇指”只悬停它会出现，所以我不能使用带有“this”功能的 thumb-info 类。如果这就是你的建议。

Answer 1

使用jQuery .hover（）并传入$ this。

$('.thumb-info').hover(function() {
  $(this).dosomething //
});

在函数处理程序中使用this，只会影响正在悬停的元素。

Answer 2

使用$(this)，以便它不会将其应用于具有该类的所有元素。

$(".thumb").hover(function(){
    $(this).next().fadeIn();
},function(){
    $(this).next().fadeOut();
});

Answer 3

由于您选择的是thumb-info类的所有元素，因此您可以使用next()或siblings()方法，试试这个：

$('.thumb').hover(function(){
     $(this).next().fadeIn('slow');
     // or $(this).siblings('.thumb-info').fadeIn('slow');
},function(){
     $(this).next().fadeOut('slow');
     // or $(this).siblings('.thumb-info').fadeOut('slow');
});

<强> Fiddle

多个相似的元素，一次将效果应用于单个元素

3 个答案: