Maison > Article > interface Web > Comment déclencher un événement en js après le survol de la souris pendant un certain temps

Comment déclencher un événement en js après le survol de la souris pendant un certain temps

一个新手original: 2017-09-27 10:34:263590parcourir

<!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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment comprendre le chargeur et le plugin dans WebpackArticle suivant：Comment comprendre le chargeur et le plugin dans Webpack

Articles Liés

Voir plus