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