イメージホバーは同時にすべてのイメージを表示します

Question

私はJqueryを使用していて、ホバー効果を作成しようとしています。最終的には、<h2>要素にカーソルを合わせるだけで、それぞれの要素コンテンツグループに対して1つの画像が表示されます。しかし、一度に複数の画像が表示されるのは、1つの画像にすぎないはずです。相続人はjQueryのpen

HTML

<p>Hover over titles</p> 

<div class="content1"> 
    <h2>Title 1 goes here </h2> 
    <img src="http://lorempixel.com/400/400/sports" alt="Image"/> 
</div> 

<div class="content2"> 
    <h2>Title 2 goes here </h2> 
    <img src="http://lorempixel.com/300/300/people" alt="Image"/> 
</div> 

<div class="content2"> 
    <h2>Title 3 goes here </h2> 
    <img src="http://lorempixel.com/200/300/technology" alt="Image"/> 
</div> 

CSS

img { 
    position: absolute; 
    display: none; 
} 

を作業

$(document).ready(function(){ 
    $('h2').on('mouseenter mousemove', function(evt){ 
     $('h2,img').css({left: evt.pageX+30, top: evt.pageY-15}).show(); 
     $(this).on('mouseleave', function(){ 
      $('img').hide(); 
     }); 
    }); 
}); 

すべての画像が一度に表示されるのはなぜですか？そのイメージをコンテキストでのみ表示するにはどうすれば解決できますか？

ありがとうございます！

Answer 1

あなたはh2イベントに一度にすべての画像を表示するためにそれを言っているので。このコードを試してみてください。

$(document).ready(function(){ 
    $('h2').on('mouseenter mousemove', function(evt){ 
     $(this).siblings('img').css({left: evt.pageX+30, top: evt.pageY-15}).show(); 
     $(this).on('mouseleave', function(){ 
      $(this).siblings('img').hide(); 
     }); 
    }); 
}); 

あなたはここで働いて、それを見ることができます：https://jsfiddle.net/zaj200mL/