p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #2b7ec3 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; min-height: 36.0px }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #d74200 }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #289c97 }
p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #4a8a01 }
p.p6 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #060606 }
p.p7 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #929151; min-height: 36.0px }
p.p8 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #929151 }
p.p9 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #a5b2b9 }
span.s1 { color: #4f5d66 }
span.s2 { color: #2b7ec3 }
span.s3 { color: #48565d }
span.s4 { color: #289c97 }
span.s5 { color: #d74200 }
span.s6 { color: #000000 }
span.s7 { color: #060606 }
span.s8 { color: #929151 }
span.s9 { color: #ad42ef }
span.s10 { color: #698906 }
span.s11 { color: #4a8a01 }
span.s12 { color: #d16400 }
span.s13 { color: #4663cc }
span.s14 { color: #e48b00 }
span.Apple-tab-span { white-space: pre }

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

#div1 {

height: 100px;

width: 100px;

background-color: red;

}

#div2 {

height: 300px;

width: 300px;

background-color: gray;

display: none;

}

div {

margin: 10px;

float: left;

}

</style>

</head>

<body>

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

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

</body>

<script type="text/javascript">

//当鼠标移出div1的时候，提示框不立刻消失，延时消失

//当鼠标移入提示框时候，提示框始终保持显示状态，

//当鼠标移出提示框时候，提示框延时消失

var sDiv = document.getElementById("div1");

var bDiv = document.getElementById("div2");

var timer = null;

// sDiv.onmouseover=function(){

// clearTimeout(timer);

// bDiv.style.display="block";

// }

// sDiv.onmouseout=function(){

// timer=setTimeout(function(){

// bDiv.style.display="none";

// },3000);

//

//

// }

// bDiv.onmouseover=function(){

// clearTimeout(timer);

// }

// bDiv.onmouseout=function(){

// timer=setTimeout(function(){

// bDiv.style.display="none";

// },3000)

// }

//函数合并,上面是未合并之前的详细代码

div1.onmouseover = div2.onmouseover = function() {

clearTimeout(timer);

div2.style.display = "block";

}

div1.onmouseout = div2.onmouseout = function() {

timer = setTimeout(function() {

div2.style.display = "none";

}, 3000)

}

</script>

</html>

JS延时提示框的更多相关文章

  1. 延时提示框制作思路[简单javascript案例]

    模拟QQ软件中的弹出提示框功能,制作一个简易的延时提示框. 功能实现: 1.当鼠标移入指定区块时,弹出隐藏的区块:当鼠标移出指定区块时,弹出的隐藏区块再次隐藏. 2.同时要求在鼠标移入该弹出区块后,区 ...

  2. Highchar.js插件提示框千分位显示为空格而不是逗号 --（2018 08/06-08/12周总结）

    1.Oracle在已经存在主键的表中插入复合主键的SQL语句 如已有一个表test_key,其中a1列为主键. CREATE TABLE TEST_KEY( A1 VARCHAR2(3) NOT NU ...

  3. js中提示框闪退问题

    当页面存在刷新  或  在线引用iframe框架时(引用框架也会导致刷新) 会导致页面加载时的弹出框闪退 解决方法:设置弹出框在页面或者框架完全加载一段时间后再弹出 <script type=& ...

  4. JS定时器的使用--延时提示框

    <title>无标题文档</title> <style> div{float:left;margin:10px;} #div1{width:50px; height ...

  5. js消息提示框插件-----toastr用法

     (本文系转载) 因为个人项目中有一个提交表单成功弹出框的需求,从网上找了一些资料,发现toastr这个插件的样式还是不错的.所以也给大家推荐下,但是网上的使用资料不是很详细,所以整理了一下,希望能给 ...

  6. 原生wcPop.js消息提示框(移动端)、内含仿微信弹窗效果

    wcPop.js移动端消息对话框插件是之前的wxPop.js的升级版,优化了js和css,并且新增了仿微信弹窗效果, 是一款含有多种情景模式的原生模态消息对话框代码,可用于替代浏览器默认的alert弹 ...

  7. 用setTimeout模拟QQ延时提示框

    很简单的代码,不多解释,一看就懂. <!DOCTYPE html> <html> <head> <meta http-equiv="Content- ...

  8. JavaScript实现延时提示框

    <html> <head> <meta charset="utf-8"> <title>无标题文档</title> &l ...

  9. JS鼠标提示框效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Django views 中的 shortcut function

    shortcut function都在django.shortcuts这个包中,主要包含有:render(), render_to_response(), redirect(), get_object ...

  2. iOS开发--应用设置及用户默认设置【2、读取应用中的设置】

            在上一节中,我们通过探讨应用的系统设置的基本功能,了解运用bundle捆绑包以及plist文件的基本开发.用户能够使用设置应用来声明他们的偏好设置,那么我们怎样去调用用户所设置的参数呢 ...

  3. Timeout expired. The timeout period elapsed prior to completion of the operation or the server is not responding.

    今天碰到了一个查询异常问题,上网查了一下,感谢原创和译者 如果你使用的数据库连接类是 the Data Access Application Blocks "SqlHelper" ...

  4. c# winform 打包部署 自定义界面 或设置开机启动

    添加安装部署项目后,鼠标右键安装项目->视图->注册表, 要使软件在开机就运行,可以在HKEY_CURRENT_USER\Software\Microsoft\Windows\Curren ...

  5. delphi ftBlob二进制字段读取存储

    aStream:TMemoryStream; 保存到字段 qrypub.ParamByName('Data').LoadFromStream(aStream, ftBlob); 从字段读取到mem里 ...

  6. CentOS 问题集锦

    在CentOS 6更新后,不可避免的会在启动选项中产生多个内核选项,一个内核文件大概占100兆左右(一般100M以下),可以使用以下命令进行删除多余的内核. 1.首先列出系统中正在使用的内核: # u ...

  7. 基于WDF的PCI/PCIe接口卡Windows驱动程序（2）-开发者需要了解的WDF中的一些重要的概念

    原文出处:http://www.cnblogs.com/jacklu/p/4646601.html 本科毕业设计是这方面的工作,所以想开几篇博客来介绍使用WDF开发PCI/PCIe接口卡的驱动程序方法 ...

  8. Devexpress VCL Build v2015 vol 15.2 开始测试

    增加了几个小玩意,与大版本变化根本无法匹配. 具体可以官网了解 https://www.devexpress.com/Subscriptions/New-2015.xml?product=vcl

  9. cocos2d-js 3.0rc0加载游戏引擎时长时间黑屏

    如果是原始引擎的话是会比较大一些,但是最终发布的时候我们都建议你打包成release版,这个可以使用cocos命令 cocos compile -p web 来完成轻松打包,会在你的项目目录下创建一个 ...

  10. Linux(centos)系统各个目录的作用详解

    Linux(centos)系统各个目录的作用详解 文件系统的类型 LINUX有四种基本文件系统类型:普通文件.目录文件.连接文件和特殊文件,可用file命令来识别. 普通文件:如文本文件.C语言元代码 ...