您的位置：首页 > Web前端 > JavaScript

图片列表：鼠标移入移出改变图片的透明度

2017-03-05 15:49 591 查看 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片列表：鼠标移入移出改变图片透明度</title>
<style>
div {
border: 1px solid #000;
width: 720px;
padding: 10px 10px;
margin: 0 auto;
}
img {
border: 1px solid darkgrey;
margin: 5px 5px;
cursor: crosshair;
opacity: 0.5;
}
</style>
<script>
var aa = document.getElementsByTagName('img');
window.onload = function() {
for (var i=0;i<aa.length;i++) {
console.log(aa.length);

aa[i].onmouseover = function() {
this.style.opacity = 1;
};
aa[i].onmouseout = function() {
this.style.opacity="";
}
}
}
</script>
</head>
<body>
<div>
<img src="BMW.jpg" />
<img src="alfo romeo.jpg" />
<img src="skoda.jpg" />
<img src="大众.jpg" />
<img src="saab.jpg" />
<img src="兰博基尼.jpg" />
<img src="保时捷.jpg" />
<img src="标致.jpg" />
<img src="奔驰.jpg" />
<img src="别克.jpg" />
</div>
</body>

</html>


<
4000
p>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript HTML CSS
相关文章推荐
新的分享
章节导航