我想创建一个java脚本代码，这样当我将鼠标移到显示的三个图像之一上时，当前图像就会被新图像替换。 首先:我想为图像元素的鼠标输入事件创建一个事件处理程序。我希望此处理程序更改图像元素的 src 属性，使其指向翻转图像的 url。 第二:我必须编写一个鼠标移出事件。此处理程序应将 images 元素的 src 属性返回到原始图像
这是 html 代码。
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Image Rollovers</title>
<link rel="stylesheet" href="main.css">
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="rollover.js"></script>
</head>
<body>
<section>
<h1>Ram Tap Combined Test</h1>
<ul id="image_rollovers">
<li><img src="images/h1.jpg" alt="" id="images/h4.jpg"></li>
<li><img src="images/h2.jpg" alt="" id="images/h5.jpg"></li>
<li><img src="images/h3.jpg" alt="" id="images/h6.jpg"></li>
</ul>
</section>
</body>
</html>最佳答案
使用 CSS 来完成此操作会更清晰:
#img {
width: 200px;
height: 200px;
border: 1px solid black;
background-image: url("https://placebear.com/200/200");
}
#img:hover {
background-image: url("http://placekitten.com/200/200");
}<div id="img"></div>但是如果您确实想使用事件监听器方法:
var img = document.querySelector('img');
img.addEventListener('mouseover', function() {
this.src = "https://placekitten.com/200/200"
})
img.addEventListener('mouseout', function() {
this.src = "https://placebear.com/200/200"
})img {
width: 200px;
height: 200px;
border: 1px solid black;
}<img src="https://placebear.com/200/200">关于JavaScript。图像翻转，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40559570/