使用悬停切换图像

Question

您好，我想问是否可以有一个图像列表，每次我将鼠标悬停在其中一个图像上时，它都会显示在另一个 div 上并且不会消失。

看看下面的图片，而不是单击图像列表，我想将其悬停，它将显示在更大的 div 上并保留在那里。悬停的图像将取代显示的图像

()

Answer 1

关键是在html中使用“onmouseover”，如果你想在离开后改变它，请使用“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="">

Answer 2

为此你需要 JS。在拇指事件

onmousenter

上，您可以获得拇指的 src 并更改目标图片的 src，然后

onmouseleave

将其切换回原始图像。