js 鼠标移入移出

最新推荐文章于 2025-06-16 23:59:03 发布

weixin_30417487

最新推荐文章于 2025-06-16 23:59:03 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/gaojian910/p/11027751.html

本文介绍了一种使用HTML和JavaScript实现鼠标移入移出元素时显示不同内容的效果。通过为每个元素添加onmouseover和onmouseout事件监听器，可以控制元素的样式变化和隐藏显示。示例代码展示了如何在鼠标悬停时更改类名和元素可见性。

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

鼠标移入移出

onmouseover 属性在鼠标指针移至元素之上时触发

onmouseout 属性在鼠标指针移除元素时触发。

HTML代码

   <div class="video_nav">
                            <div class="video">
                                <span class="vi current">十佳球</span>
                                <span class="vi">大神回忆录</span>
                                <span class="vi">视频专区</span>
                                <span class="vi">高手大讲堂</span>
                            </div>
                            <a href="" class="video_bg1" style="display: block">
                                <img src="res/img/video_4.jpg" alt="">
                                <span class="play"></span>
                            </a>
                            <a href="" class="video_bg1" style="display: none">
                                <img src="res/img/video_2.jpg" alt="">
                                <span class="play"></span>
                            </a>
                            <a href="" class="video_bg1" style="display: none">
                                <img src="res/img/video_3.jpg" alt="">
                                <span class="play"></span>
                            </a>
                            <a href="" class="video_bg1" style="display: none">
                                <img src="res/img/video_1.jpg" alt="">
                                <span class="play"></span>
                            </a>
                        </div>
                    </div>

js代码

 var div = document.getElementsByClassName('video');
    var spa = document.getElementsByClassName('vi');
    var ull = document.getElementsByClassName('video_bg1');
    for (var i = 0; i < spa.length; i++) {
        spa[i].index = i;
        spa[i].onmouseover = function () {
            for (var i = 0; i < spa.length; i++) {
                spa[i].className = 'vi';
                ull[i].style.display = 'none';
            }
            this.className = 'vi current';
            ull[this.index].style.display = 'block';
        }
    }