cari

Rumah >hujung hadapan web >tutorial js >js如何实现鼠标悬停一定时间后触发事件

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

一个新手
一个新手asal
2017-09-27 10:34:263666semak imbas

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

Atas ialah kandungan terperinci js如何实现鼠标悬停一定时间后触发事件. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：如何理解webpack中loader和pluginArtikel seterusnya：如何找出数组中重复次数最多的元素

Artikel berkaitan

Lihat lagi