-1

次のコードを確認してください。その自動生成されたコード。「thumb-info」クラスにのみfadeIn（）効果を適用したいと思います。

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

現在カーソルがホバリングしている要素にのみ適用したい。

お時間をいただきありがとうございます。

編集：ご回答ありがとうございますが、「thumb-info」は非表示の要素であり、「。thumb」にカーソルを合わせると表示されるだけなので、 「this」関数でthumb-infoクラスを使用することはできません。それがあなたが提案していることなら。

4

3 に答える 3

0

のクラスを持つすべての要素を選択しているため、またはメソッド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');
});

フィドル

  1. 次（）
  2. ホバー()
  3. 兄弟（）
于 2012-08-17T16:39:31.500 に答える
0

jQuery .hover() を使用して $this を渡します。

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

関数ハンドラーで使用thisすることにより、ホバーされている要素のみに影響を与えます。

于 2012-08-17T16:35:44.420 に答える
0

$(this)そのクラスを持つすべての要素に適用しないように使用します。

$(".thumb").hover(function(){
    $(this).next().fadeIn();
},function(){
    $(this).next().fadeOut();
});
于 2012-08-17T16:37:15.687 に答える