事件处理：鼠标进入时显示一张图片，鼠标离开时显示另外一张图片，如此交替

最新推荐文章于 2025-03-15 22:56:15 发布

宋宋丫

最新推荐文章于 2025-03-15 22:56:15 发布

阅读量280

点赞数 2

文章标签： html 前端 javascript

本文链接：https://blog.youkuaiyun.com/m0_73145804/article/details/127638311

版权

本文介绍了一种使用HTML和JavaScript实现的基本图片悬停效果。当鼠标移至图片上时，图片将切换为另一张图片；当鼠标移开时，图片恢复原状。此功能适用于网页设计中的交互元素。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="./img/1.jpg" alt="" id="img">
    <script>
        document.querySelector('img').addEventListener('mouseout',function(){
            this.src = './img/3.jpg'
        })
        document.querySelector('img').addEventListener('mouseover',function(){
            this.src = './img/1.jpg'
        })
    </script>
</body>
</html>