【JavaScript】js可以直接使用的鼠标经过切换图片

原创已于 2022-03-04 11:58:34 修改 · 1w 阅读

30 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

于 2017-08-03 19:56:44 首次发布

原创同时被 2 个专栏收录

58 篇文章

订阅专栏

js效果

2 篇文章

订阅专栏

本文介绍了一段使用JavaScript实现的简单效果：当鼠标悬停在图片上时更换图片源，鼠标离开时恢复原图。代码简洁易懂，适合初学者学习。

在这里插入图片描述

js实现简单的鼠标经过切换图片，鼠标移出图片还原。

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script type="text/javascript">
window.onload=function() {
    var oImg=document.getElementsByClassName("imgs")[0];
    oImg.onmouseover=function(){                  //鼠标经过
        oImg.src="这里写要替换的图片路径";
    };
    oImg.onmouseleave=function(){                  //鼠标移出
        oImg.src="这里写图片路径";
    }


}
</script>
<img src="这里写图片路径" class="imgs"/>   <--如果此处的class更改，对应的js获取元素的class也要更改-->
</body>
</html>

感谢阅读。

在这里插入图片描述