延时提示框

来源：互联网发布：网络公司简介怎么写编辑：程序博客网时间：2024/05/27 10:43

效果演示：
这里写图片描述
实现方法
移入显示，移出隐藏
移除延时隐藏，可以实现从第一个div移入第二个div，仍然可以显示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><style>#div1 {    width: 50px;    height: 50px;    background: red;    float: left}#div2 {    margin-left: 10px;    width: 250px;    height: 150px;    background: yellow;    float: left;    display: none}</style><script>window.onload=function(){    var oDiv1=document.getElementById('div1');    var oDiv2=document.getElementById('div2');    var timer=null;    oDiv1.onmouseover=oDiv2.onmouseover=function()    {        clearTimeout(timer);        oDiv2.style.display='block';    };    oDiv1.onmouseout=oDiv2.onmouseout=function()    {        timer=setTimeout(function()        {            oDiv2.style.display='none';}        ,500);       };};</script><body><div id="div1"></div><div id="div2"></div></body></html>

GitHub源码地址

阅读全文

0 0