首页 > 文章 > web前端 > js如何实现鼠标悬停一定时间后触发事件

js如何实现鼠标悬停一定时间后触发事件

一个新手原创: 2017-09-27 10:34:263625浏览

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

以上是js如何实现鼠标悬停一定时间后触发事件的详细内容。更多信息请关注PHP中文网其他相关文章！

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：如何理解webpack中loader和plugin下一篇：如何找出数组中重复次数最多的元素

查看更多