Vorschau von Bildern, wenn der Cursor auf verschiedene Optionen in einem Menü schwebt

Question

ich eine HTML-Seite mit einem Menü haben mit 4 Tasten verschiedene Produkte

mit Jedes Mal, wenn sich der Cursor auf jeder Taste schwebt muss es Bilder von verschiedenen Produkten anzuzeigen

Jeden Beispielcode/link auf, wie es zu tun

sehr hilfreich seine

ich versuche, diese

in HTML, CSS und JQuery zu erreichen

ich habe versucht, den CSS :hover pseudoselector auf den Tasten und c mit die Sicht hängen, aber es hat nicht funktioniert.

Answer 1

Sie müssen auf die IDs sowohl der Schaltflächen als auch der Bilder verweisen.

Da wir mit unverlängerten Elementen arbeiten, können wir den css Pseudoselektor nicht verwenden. Wir müssen auf das Ereignis mouseover oder mouseenter warten, um zu bestimmen, wann immer sich der Cursor über einer Schaltfläche befindet. Wenn der Cursor die Schaltfläche verlässt, rufen wir die Ereignisse mouseout oder mouseleave auf.

Hier ist ein Beispiel mit JavaScript.

var dinosaur1 = document.getElementById("dinosaur1"); 
 
var dinosaur2 = document.getElementById("dinosaur2"); 
 
var dino1 = document.getElementById("dino1"); 
 
var dino2 = document.getElementById("dino2"); 
 

 

 
dinosaur1.addEventListener("mouseover", function() { 
 
    dino1.style.visibility = "visible"; 
 
}); 
 

 
dinosaur1.addEventListener("mouseout", function() { 
 
    dino1.style.visibility = "hidden"; 
 
}); 
 

 
dinosaur2.addEventListener("mouseover", function() { 
 
    dino2.style.visibility = "visible"; 
 
}); 
 

 
dinosaur2.addEventListener("mouseout", function() { 
 
    dino2.style.visibility = "hidden"; 
 
});

img { 
 
    visibility: hidden; 
 
}

Diese noch einfacher in jQuery ist, weil wir zu nisten Veranstaltungen.

$("#dinosaur1").on("mouseover", function() { 
 
    $("#dino1").css({"visibility": "visible"}); 
 
}).on("mouseout", function() { 
 
    $("#dino1").css({"visibility": "hidden"}); 
 
}); 
 

 
$("#dinosaur2").on("mouseover", function() { 
 
    $("#dino2").css({"visibility": "visible"}); 
 
}).on("mouseout", function() { 
 
    $("#dino2").css({"visibility": "hidden"}); 
 
});

img { 
 
    visibility: hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="dinosaur1">Dinosaur 1</button> 
 
<button id="dinosaur2">Dinosaur 2</button> 
 

 
<img height="150" width="150" id="dino1" src="http://vignette4.wikia.nocookie.net/dinosaurs/images/5/55/T-rex-dinosaur-clip-art-T-Rex-Dinosaur_1.png/revision/latest?cb=20151118162207" /> 
 

 
<img height="150" width="150" id="dino2" src="http://i.telegraph.co.uk/multimedia/archive/03520/Kunbarrasaurus_3520731b.jpg" />