js 鼠标移入移出

鼠标移入 移出

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';
        }
    }