zoukankan      html  css  js  c++  java
  • 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';
            }
        }

  • 相关阅读:
    基于webpack的react脚手架
    关于密码的简单加密
    移动端日期控件
    JS中如何巧妙的用事件委托
    JS中关于正则的巧妙操作
    call,apply,bind
    vue常用笔记
    高性能的js第三方库——lodash、 Underscore、async、md5及moment
    Nightwatch——自动化测试(端对端e2e)
    for循环的耗时问题
  • 原文地址:https://www.cnblogs.com/gaojian910/p/11027751.html
Copyright © 2011-2022 走看看