鼠标放到图片上实现动态的效果

最新推荐文章于 2022-09-30 10:47:00 发布

woshituhao

最新推荐文章于 2022-09-30 10:47:00 发布

阅读量2.5k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/woshituhao/article/details/47446633

本文介绍如何通过JavaScript实现鼠标悬停时图片的动态效果，包括改变样式和触发特定行为，适合前端开发者学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鼠标放到图片上实现动态的效果</title>
<style type="text/css">

img.new{margin-left:30px}
.over{border:1px red solid;margin-left:30px}

</style>
<script type="text/javascript">

onload = function()
{
var imgs = document.getElementsByTagName("img");
for (var i = 0; i < imgs.length; i++) {
//鼠标放到图片上触发的事件
imgs[i].onmouseover = function()
{
//要实现的样式为‘over’
this.className = 'over';
}
//鼠标移开图片时触发的事件
imgs[i].onmouseout = function()
{
//要实现的样式为‘new’
this.className = "new";
}
}
}
</script>

</head>
<body>
<img src= '../images/new_01.jpg' class = 'new'/>
<img src= '../images/new_02.jpg' calss = 'new'/>
<img src= '../images/new_03.jpg' class = 'new'/>
</body>

</html>