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の初心者です。効果を一度に1つのサムネイルに制限する方法を教えてください。ユーザーがホバーしたサムネイルでのみエフェクトがトリガーされるようにしたい。

編集：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

これを次に使用して、セレクターに一致する次の要素を選択できます。

$('.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 に答える