延时提示框

最新推荐文章于 2024-05-07 14:48:44 发布

女神修炼日记Cherry

最新推荐文章于 2024-05-07 14:48:44 发布

阅读量345

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript实例应用

本文链接：https://blog.youkuaiyun.com/qq_36192099/article/details/78622005

javascript实例应用专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一个简单的HTML和JavaScript实现方案，通过鼠标悬停显示元素，并在鼠标离开后延迟隐藏元素，达到类似QQ头像延时提示的效果。

思路思考：

1、鼠标移入移出效果

2、定时器延时消失效果

解决过程：

html的内容：

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

js部分如下：

var oDiv1 =document.getElementById('div1');
            var oDiv2 =document.getElementById('div2');
            var timer;
            oDiv1.onmouseover=oDiv2.onmouseover=function(){
                clearTimeout(timer)
                oDiv2.style.display = "block"
            }
            oDiv1.onmouseout=oDiv2.onmouseout=function(){
                timer=setTimeout(function(){
                    oDiv2.style.display= "none"
                },500)
            }

在解决问题过程中，发现代码有相似的地方，要进行代码合并，缩减代码，后得出来此结果。

效果如qq头像的延时提示。