将鼠标悬停在当前图像上时，如何更改代码以允许其更改图像？
我要更改的图片位于body我的网页中：
<body>
<!-- Here's myImage!-->
<img src="myImage.jpg" alt="BM" style="width:141px;height:114px; position:absolute; top: 300px; left: 450px;">
并且我希望此图像例如anotherImage.jpg当您将鼠标悬停在时可以更改为新图像myImage.jpg。我试图在其他地方寻求帮助，但没有成功。
您可以使用javascript的onmouseover事件，但最好在可能的情况下使用CSS。
这是一个可能的解决方案的演示：（在Codepen上编辑）
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.container {
position: relative;
width: 600px;
height: 400px;
margin-left: 50px;
}
.container:hover img:nth-of-type(2) {
opacity: 1;
}
.container img {
position: absolute;
top: 0;
left: 0;
width: 600px;
height: 400px;
transition: opacity 1s ease-in-out 0s;
}
.container img:nth-of-type(1) {
opacity: 1;
}
.container img:nth-of-type(2) {
opacity: 0;
}<div class="container">
<img src="https://placeimg.com/600/400/animals" />
<img src="https://placeimg.com/600/400/people" />
</div>基本上，此方法的工作方式是通过CSS将两个图像设置为相同的大小，并将它们放置在彼此的顶部（这就是绝对定位的目的）。当用户不将鼠标悬停在其上方时，第二个图像的不透明度为0（nth-of-type(2)选择器选择了该类型的第二个元素），因此它不可见，而第一个图像的不透明度为1，因此可见。当用户将鼠标悬停在其上方时，第二个的透明度将为1，因此完全可见，并且由于它们的大小相同且彼此重叠，因此第一个被第二个覆盖。这意味着当您将鼠标悬停在图像上时，图像会发生变化。
另一个好处是，正如您在演示中所看到的那样，它是完全可动画的！其他解决方案（例如使用display: none或背景图像）不能与CSS过渡配合使用，因为它们不是可动画化的属性，但是不透明度是可动画的，因此您可以创建这样的过渡！祝你好运！
如果您不理解我对此的解释，请随时进行澄清！
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句