Switch image by using hover

October 10, 2023

Hi there I want to ask if it is possible to have an image list and everytime I hover on one of them it will display on another div and will not disappear.

Take a look on the picture below instead of clicking the list of image I want to hover it and it will display on the bigger div and will stay there. The hovered image will replace the displayed image

(https://i.stack.imgur.com/2Iip7.png)

>Solution :

the key is to use "onmouseover" in html, if u want it to change after leaving use "onmouseleave"

var a = 'url("https://i.stack.imgur.com/2Iip7.png" )';

function noone(element) {
  document.getElementById("div1").style.backgroundImage = a;
}

<!-- div for the main -->
<div id="div1">This statement will change</div>
<!-- div for the one of the down image, i used img not div -->
<img src="https://i.stack.imgur.com/2Iip7.png" onmouseover="noone(this) ;" alt="">