JS练习之鼠标经过切换图片

最新推荐文章于 2023-11-03 23:29:46 发布

风中梦铃s

最新推荐文章于 2023-11-03 23:29:46 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： JS

本文链接：https://blog.youkuaiyun.com/m_S_L/article/details/85028887

JS 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript实现的鼠标悬停切换图片效果。通过onmouseover与onmouseout事件，当鼠标悬停在图片上时，图片将被替换成另一张图片，鼠标移开后则恢复原图。这是一种基本的网页交互效果，适用于产品展示或图库预览等场景。

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

1、实现原理：利用onmouseover与onmouseout事件

2、整体代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<img src="images/jd1.png" alt="" id="pic"/>
<script>
    var pic = document.getElementById("pic");
    pic.onmouseover = function(){
        pic.onmouseout = function(){
            pic.src = "图片1";
        }
        pic.src = "图片2";
    }
</script>
</body>
</html>