我已经尝试了很多方法来解决这个问题，但我似乎找不到解决办法，所以是时候向更有经验的人寻求帮助了。 基本上我想要的是当我将鼠标悬停在 img 所在的“div”(框)上时图像发生变化。看看代码:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: grey;
}
#box {
margin: 0 auto;
width: 300px;
height: 300px;
background: blue
}
#box img {
display: block;
margin: 0 auto;
padding-top: 75px;
}
</style>
<meta charset="utf-8">
</head>
<body>
<a href="#">
<div id="box">
<img src="registration_icon_white.png" onmouseover="src='registration_icon_black.png'" onmouseout="'registration_icon_black.png'">
</div>
</a>
</body>
(图片是一样的，只是颜色不同)
如有任何帮助，我们将不胜感激。
最佳答案
您可以将图片放在 div 的背景中。
<div id="box"></div>
#box {
background: url("registration_icon_black.png");
height: 500px;
}
#box:hover{
background: url("registration_icon_white.png");
}
关于html - 将鼠标悬停在 div 上时显示不同的图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46354801/