jquery如何给鼠标进入事件设置三秒后执行里面的函数，谢谢

发布于 2022-09-04 00:22:38 字数 1045 浏览 15 评论 0

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">

    p{
        width:150px;
        height:150px;
        float:left;
        border:1px solid #ddd;
    }

</style>
</head>
<body>

<div id="append">
    <p>amaze</p>
    <p>amaze</p>
    <p>amaze</p>
    <p>amaze</p>
</div>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
    $("#append").on("mouseenter mouseleave","p",function(e){
                if(e.type == "mouseenter"){
                    //鼠标进入
                    $(this).text("wow");
                }else if(e.type == "mouseleave"){
                    //鼠标离开
                   $(this).text("amaze");
                }
            });
</script>

</body>
</html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

隔纱相望 2022-09-11 00:22:38

这应该是你想要的答案，重新优化了一下。

var timeoutObj = null;
$("#append").on("mouseenter mouseleave","p",function(e){
    if(e.type == "mouseenter"){
        //鼠标进入
        (function(me){            
            timeoutObj = setTimeout(function(){
                $(me).text("wow");
            },3000);     
        }(this));           
    }else if(e.type == "mouseleave"){
        //鼠标离开        
        $(this).text("amaze");
        if(timeoutObj != null){
            clearTimeout(timeoutObj);
        }
    }
});

回复收藏 0

听，心雨的声音 2022-09-11 00:22:38

settimeout(functoin(){},3000)

回复收藏 0

私野 2022-09-11 00:22:38

<script type="text/javascript">
    $("#append").on("mouseenter mouseleave","p",function(e){
                if(e.type == "mouseenter"){
                    //鼠标进入
                    $(this).text("wow");
                    setTimeout("Onlive()",3000);
                }else if(e.type == "mouseleave"){
                    //鼠标离开
                   $(this).text("amaze");
                }
    });
    function Onlive(){
        alert("3秒弹出");
    }
</script>

回复收藏 0

~没有更多了~