js 用延时函数来实现像鼠标移入qq头像然后会出现新的模块

最新推荐文章于 2022-01-05 22:04:48 发布

weixin_30808693

最新推荐文章于 2022-01-05 22:04:48 发布

阅读量53

点赞数

原文链接：http://www.cnblogs.com/biyongyao/p/5843326.html

版权

就好像这功能。

代码如下

<style>
    #div1{
        width:50px;
        height:50px;
        background:red; 
        margin-bottom:10px;
    }
    #div2{
        width:200px;
        height:200px;
        background:black;
        display:none;
    }
</style>


<body>
<div id="div1"></div>
<div id="div2"></div>
    
</body>

<script>
    window.οnlοad=function()
    {
        var div1=document.getElementById("div1");
        var div2=document.getElementById('div2');
        var timer=null;
        div1.οnmοuseοver= function()
        {
             div2.style.display='block';
        };

       
                div1.οnmοuseοut= function()
                    {
                        clearTimeout(timer);
                       timer= setTimeout(function()
                        {
                             div2.style.display='none';
                        }, 500)
                    };
            div2.οnmοuseοver=function()
            {
                clearTimeout(timer);
            };
            div2.οnmοuseοut=function(){
                 timer=setTimeout(function(){div2.style.display='none';},500);            
            }
           
            
                    
    }
</script>

为什么要用延时器，

因为当移动另外一个模块时需要一定的时间，延时，鼠标能有一定的时间移到新的模块。

转载于:https://www.cnblogs.com/biyongyao/p/5843326.html

weixin_30808693

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 用延时函数来实现像鼠标移入qq头像然后会出现新的模块

就好像这功能。代码如下<style> #div1{ width:50px; height:50px; background:red; margin-bottom:10px; } #div2{ width:200px; ...
复制链接

扫一扫