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

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/