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

码婆Doph

已于 2022-03-04 11:58:34 修改

阅读量1w

点赞数 2

分类专栏：原创 js效果文章标签： javascript

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

本文链接：https://blog.csdn.net/liu_jiachen/article/details/76647920

版权

原创同时被 2 个专栏收录

58 篇文章 3 订阅

订阅专栏

js效果

2 篇文章 0 订阅

订阅专栏

在这里插入图片描述

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>

感谢阅读。

在这里插入图片描述