图像悬停同时显示所有图像

Question

我正在使用 Jquery 并尝试创建悬停效果。最终结果只是将鼠标悬停在 <h2> 元素上，并且应该为相应的元素内容组显示单个特征图像。然而，多个图像一次出现，而它应该只是一个图像。继承人工作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;
}

jQuery

$(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/