鼠标放在图片上面进行图片的切换

最新推荐文章于 2021-10-09 16:52:12 发布

西红柿炒番茄AB

最新推荐文章于 2021-10-09 16:52:12 发布

阅读量3.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端文章标签： JavaScript

本文链接：https://blog.youkuaiyun.com/a_sid/article/details/53428487

前端专栏收录该内容

35 篇文章

订阅专栏

本文介绍如何使用JavaScript在鼠标悬停图片时实现图片的动态切换效果，通过实例代码详细解析实现过程，帮助理解JavaScript在动态交互中的应用。

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

<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            #did img {
                border: 2px solid #fff;
                margin-left: 8px;
            }

            #did img:hover {
                border: 2px solid red;
            }
        </style>

    </head>

    <body>

        <h2>事件切换</h2>
        <img id="mid" src="./images/11.jpg" width="380" />
        <div id="did">
            <img src="./images/11.jpg" width="80" />
            <img src="./images/22.jpg" width="80" />
            <img src="./images/33.jpg" width="80" />
            <img src="./images/44.jpg" width="80" />
        </div>
        <script type="text/javascript">
            //获取到img
            var mid = document.getElementById("mid");
            //获取到div,然后再获取div里面的img节点
            var list = document.getElementById("did").getElementsByTagName("img");
            //通过for循环给每一个图片设置事件
            for(var i = 0; i < list.length; i++) {
                //当鼠标放在图片上面的时候将会触发这个事件
                list[i].onmouseover = function() {
                    //将鼠标放在哪张图片上，this就代表哪张图片
                    mid.src = this.src;
                }
            }
        </script>
    </body>

</html>

这里写图片描述