Image hover zeigt alle Bilder gleichzeitig an - Javascript, Jquery, HTML, CSS, Image

Ich arbeite mit Jquery und versuche, einen Hover - Effekt zu erzeugen. Das Endergebnis ist einfach, über a zu schweben <h2> Elemente und ein einzelnes Feature-Image sollten für die jeweilige Element-Inhaltsgruppe angezeigt werden. Es werden jedoch mehrere Bilder gleichzeitig angezeigt, wobei es sich nur um ein Bild handeln sollte. Heres arbeiten Stift

HTML

<p>Hover over titles</p>

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

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

<div class="content2">
<h2>Title 3 goes here </h2>
<img src="/images/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();
});
});
});

Warum werden alle Bilder gleichzeitig angezeigt? und wie kann ich es auflösen, um nur das eine Bild im Kontext anzuzeigen?

Vielen Dank!

Antworten:

Weil du sagst, es sollen alle Bilder auf einmal auf dem Bildschirm angezeigt werden h2 Veranstaltung. Versuchen Sie diesen Code:

$(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();
});
});
});

Sie können es hier sehen: https://jsfiddle.net/zaj200mL/