问JavaScript。图像翻转
EN

Stack Overflow用户

提问于 2016-11-12 04:26:17

回答 1查看 1.2K关注 0票数 0

我想要创建一个java脚本代码，这样当我将鼠标移动到所显示的三个图像中的一个时，当前的图像将被一个新的图像所替代。优先:我想为图像元素的鼠标enter事件创建一个事件处理程序。我希望这个处理程序更改图像元素的src属性，以便它指向滚动图像的url。第二:我必须编写一个鼠标退出事件。此处理程序应将图像元素的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>

javascript

html

回答 1

Stack Overflow用户

发布于 2016-11-12 04:50:06

使用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">

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/40559570

复制

相似问题

问JavaScript。图像翻转
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JavaScript。图像翻转EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JavaScript。图像翻转
EN