search

Home  >  Article  >  Web Front-end  >  How to trigger an event in js after the mouse hovers for a certain period of time

How to trigger an event in js after the mouse hovers for a certain period of time

一个新手
一个新手Original
2017-09-27 10:34:263625browse

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

The above is the detailed content of How to trigger an event in js after the mouse hovers for a certain period of time. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to understand loader and plugin in webpackNext article：How to understand loader and plugin in webpack

Related articles

See more