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. cocos2dx音乐与音效

    // 预加载音乐和音效 SimpleAudioEngine::sharedEngine()->preloadBackgroundMusic(CCFileUtils::sharedFileUtil ...

  2. Flex帮助文档ASDoc

    首先,我们一般会对类文件的类和成员以及成员函数做一些解析性说明.那么这个解析性说明应该怎么写呢?如果想给指定的类.成员属性.成员函数加上注释,可以在这些声明的顶部按照下面的格式属性注释: (在flas ...

  3. 配置 Gii 允许访问的 IP 地址

    通过本机以外的机器访问 Gii,请求会被出于安全原因拒绝,在 config/web.php 配置 Gii 为其添加允许访问的 IP 地址: if (YII_ENV_DEV) { // configur ...

  4. Chap6: question 46 - 48

    46. 求 1+2+ … +n. 要求:不用乘除法.for.while.if.else.switch.case 以及条件判断语句(A?B:C). a. 利用构造函数求解 #include <io ...

  5. Spark Streaming、HDFS结合Spark JDBC External DataSouces处理案例

    场景:使用Spark Streaming接收HDFS上的文件数据与关系型数据库中的表进行相关的查询操作: 使用技术:Spark Streaming + Spark JDBC External Data ...

  6. Flex 加载 wmf，svg

    最近做gis系统发现要在flex加载wmf图片.我记得flash的loader只能是png,gis,jpg.wmf格式居然是window出的,flash居然不支持我也是醉了,没办法,只能后台转格式,首 ...

  7. NHibernate系列文章一：NHibernate介绍

    摘要 NHibernate是一个成熟的开源的面向对象的.net映射框架.大量的实际项目中正在使用该框架.他是建立在ADO.Net基础之上.目前的版本是NHibernate 4.0.4.本系列文章都是基 ...

  8. 解决阿里云数据库RDS报错The table '/home/mysql/data3015/tmp/#sql_13975_23' is full

    查询任何一条语句都显示 The table '/home/mysql/data3015/tmp/#sql_13975_23' is full 查看了下数据库利用磁盘空间没有满, 阿里云的处理方式: 1 ...

  9. Winform数据导出Execl小工具

    前台界面.cs文件 using System; using System.Collections.Generic; using System.ComponentModel; using System. ...

  10. mysql——查询练习

    Sutdent表的定义 字段名 字段描述 数据类型 主键 外键 非空 唯一 自增 Id 学号 INT(10) 是 否 是 是 是 Name 姓名 VARCHAR(20) 否 否 是 否 否 Sex 性 ...