Heim > Artikel > Web-Frontend > So lösen Sie ein Ereignis in js aus, nachdem die Maus eine bestimmte Zeit lang schwebt

So lösen Sie ein Ereignis in js aus, nachdem die Maus eine bestimmte Zeit lang schwebt

一个新手Original: 2017-09-27 10:34:263586Durchsuche

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>闭包--自执行函数--案例--淘宝例子</title>
    <style type="text/css">

        .container{
            width: 300px;
            height: 150px;
            background-color: #16A085;
        }
        .nav_ul{
            padding: 0;
            list-style: none;
            height: 35px;
        }
        .nav_ul li{
            float: left;
            height: 35px;
            line-height: 35px;
            text-align: center;
            width: 25%;
            transition:  all .5s;
            cursor: pointer;
        }
        .select_li{
            color: white;
            border-bottom: 2px solid #FD4401;
        }
        .content{
            width: 300px;
        }
        .content p ul{
            padding: 0;
            list-style: none;
            width: 300px;
        }
        .content p ul li{
            float: left;
            width: 50%;
            text-align: center;
            height: 40px;
            line-height: 40px;
            cursor: pointer;
        }
        .content p{
            position: absolute;
            left: 0;
            top: 45px;
            display: none;
        }
        .content .select_p{
            display: block;
        }

    </style>
</head>
<body>
    <p class="container">
        <p class="nav">
            <ul class="nav_ul">
                <li class="select_li">剧集</li>
                <li>电影</li>
                <li>综艺</li>
                <li>动漫</li>
            </ul>
        </p>
        <p class="content">
            <p class="select_p">
                <ul>
                    <li onclick="window.location.href=&#39;https://www.hao123.com/&#39;">琅琊榜</li>
                    <li onclick="window.location.href=&#39;https://www.hao123.com/&#39;">盲约</li>
                    <li onclick="window.location.href=&#39;https://www.hao123.com/&#39;">无心法师</li>
                    <li onclick="window.location.href=&#39;https://www.hao123.com/&#39;">高能医少</li>
                </ul>
            </p>
            <p>
                <ul>
                    <li onclick="window.location.href=&#39;https://www.hao123.com/&#39;">加勒比</li>
                    <li onclick="window.location.href=&#39;https://www.hao123.com/&#39;">绣春刀</li>
                    <li onclick="window.location.href=&#39;https://www.hao123.com/&#39;">鲛珠传</li>
                    <li onclick="window.location.href=&#39;https://www.hao123.com/&#39;">变形金刚</li>
                </ul>
            </p>
            <p>
                <ul>
                    <li onclick="window.location.href=&#39;https://www.hao123.com/&#39;">坑王驾到</li>
                    <li onclick="window.location.href=&#39;https://www.hao123.com/&#39;">快乐大本营</li>
                    <li onclick="window.location.href=&#39;https://www.hao123.com/&#39;">明星大侦探</li>
                    <li onclick="window.location.href=&#39;https://www.hao123.com/&#39;">爸爸去哪儿</li>
                </ul>
            </p>
            <p>
                <ul>
                    <li onclick="window.location.href=&#39;https://www.hao123.com/&#39;">友人帐</li>
                    <li onclick="window.location.href=&#39;https://www.hao123.com/&#39;">黑贼王</li>
                    <li onclick="window.location.href=&#39;https://www.hao123.com/&#39;">你的名字</li>
                    <li onclick="window.location.href=&#39;https://www.hao123.com/&#39;">柯南</li>
                </ul>
            </p>
        </p>
    </p>
    <script>
        var liList=document.querySelector(&#39;.nav_ul&#39;).querySelectorAll(&#39;li&#39;);
        var pList=document.querySelector(&#39;.content&#39;).querySelectorAll(&#39;p&#39;);
        var timer=null;
        // 每一个li鼠标进入事件
        for(var index=0;index<liList.length;index++){
    //        自执行函数在一写完、一绑定的时候，不需要触发就执行
    //        自执行函数返回function，实际上 当鼠标进入时实际上执行的是返回的函数
            liList[index].onmouseenter= (function (selectIndex) {
                return function () {
                    //增加延迟事件
                    timer=setTimeout(function () {
                        //清除所有样式 li 显示相应p中的ul 样式也去掉
                        for(var i=0;i<liList.length;i++){
                            liList[i].removeAttribute(&#39;class&#39;);
                            pList[i].removeAttribute(&#39;class&#39;);
                        }
                        liList[selectIndex].setAttribute(&#39;class&#39;,&#39;select_li&#39;);
                        pList[selectIndex].setAttribute(&#39;class&#39;,&#39;select_p&#39;);
                    },600);
                };
            }(index));
    //        添加鼠标移出事件，保证离开的时候清除延迟器，不影响下一次操作
            liList[index].onmouseleave = function (eve) {
                clearTimeout(timer);
            };
        }
    </script>

</body>
</html>

Das obige ist der detaillierte Inhalt vonSo lösen Sie ein Ereignis in js aus, nachdem die Maus eine bestimmte Zeit lang schwebt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So verstehen Sie Loader und Plugin im WebpackNächster Artikel：So verstehen Sie Loader und Plugin im Webpack

In Verbindung stehende Artikel

Mehr sehen