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/

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

1 个答案: