JS实现延迟隐藏功能的方法(类似QQ头像鼠标放上展示信息)


Posted in Javascript onDecember 28, 2017

JS实现延迟隐藏

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>延迟隐藏</title>
 <style>
 #div1{
  width:100px;
  height:100px;
  background:yellow; 
  border: 5px solid #999;
  border-radius: 10px;
  position: absolute;
  right: 50px;
  text-align: center;
  line-height: 100px;
  margin-bottom:10px;
 }
 #div2{
  width:200px;
  float: left;
  height:200px;
  border: 5px solid #999;
  border-radius: 10px;
  position: absolute;
  right:160px;
  text-align: center;
  line-height: 200px;
  background:green;
  display:none;
 }
</style>

<script>
 window.onload=function(){
  var div1=document.getElementById("div1");
   div1.innerHTML="鼠标请放上!";
  var div2=document.getElementById('div2');
   div2.innerHTML="鼠标请移开!";
  var timer=null;
  div1.onmouseover= function(){  
    clearTimeout(timer);
    div2.style.display='block';
  };
   div1.onmouseout= function(){
   clearTimeout(timer);
    timer= setTimeout(function(){
      div2.style.display='none';
    }, 700);
  };
  div2.onmouseover=function(){
   clearTimeout(timer);
  };
  div2.onmouseout=function(){
   clearTimeout(timer);
    timer=setTimeout(function(){div2.style.display='none';},700);   
  }
 }
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
 
</body>
</html>

JS实现延迟隐藏功能的方法(类似QQ头像鼠标放上展示信息)

以上这篇JS实现延迟隐藏功能的方法(类似QQ头像鼠标放上展示信息)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery中输入验证中一个不错的效果
Aug 21 Javascript
通过Jquery遍历Json的两种数据结构的实现代码
Jan 19 Javascript
JavaScript中的变量声明早于赋值分析
Mar 01 Javascript
javascript客户端遍历控件与获取父容器对象示例代码
Jan 06 Javascript
JavaScript实现关键字高亮功能
Nov 12 Javascript
javascript动态创建链接的方法
May 13 Javascript
浅谈JavaScript中的Math.atan()方法的使用
Jun 14 Javascript
基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)
Jul 22 Javascript
jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
Aug 01 Javascript
扩展Bootstrap Tooltip插件使其可交互的方法
Nov 07 Javascript
在 Angular中 使用 Lodash 的方法
Feb 11 Javascript
JavaScript使用闭包模仿块级作用域操作示例
Jan 21 Javascript
Angular实现的简单定时器功能示例
Dec 28 #Javascript
Angular实现的自定义模糊查询、排序及三角箭头标注功能示例
Dec 28 #Javascript
vue+swiper实现侧滑菜单效果
Dec 28 #Javascript
swiper插件自定义切换箭头按钮
Dec 28 #Javascript
swiper移动端轮播插件(触碰图片之后停止轮播)
Dec 28 #Javascript
Vue组件通信之Bus的具体使用
Dec 28 #Javascript
基于Swiper实现移动端页面图片轮播效果
Dec 28 #Javascript
You might like
PHP 万年历实现代码
2012/10/18 PHP
php定时删除文件夹下文件(清理缓存文件)
2013/01/23 PHP
几道坑人的PHP面试题 试试看看你会不会也中招
2014/08/19 PHP
微信开发之php表单微信中自动提交两次问题解决办法
2017/01/08 PHP
PHP对象相关知识总结
2017/04/09 PHP
一个tab标签切换效果代码
2009/03/27 Javascript
基于mouseout和mouseover等类似事件的冒泡问题解决方法
2013/11/18 Javascript
JS小功能(button选择颜色)简单实例
2013/11/29 Javascript
js document.write()使用介绍
2014/02/21 Javascript
JavaScript中的立即执行函数表达式介绍
2015/03/15 Javascript
javascript版2048小游戏
2015/03/18 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
2016/07/27 Javascript
node.js版本管理工具n无效的原理和解决方法
2016/11/24 Javascript
js实现城市级联菜单的2种方法
2017/06/23 Javascript
Vue Router去掉url中默认的锚点#
2018/08/01 Javascript
vue二级菜单导航点击选中事件的方法
2018/09/12 Javascript
js神秘的电报密码 哈弗曼编码实现
2019/09/10 Javascript
Vue常用的全选/反选的示例代码
2020/02/19 Javascript
javascript设计模式 ? 代理模式原理与用法实例分析
2020/04/16 Javascript
解决VUE项目使用Element-ui 下拉组件的验证失效问题
2020/11/07 Javascript
JavaScript实现复选框全选和取消全选
2020/11/20 Javascript
如何将python中的List转化成dictionary
2016/08/15 Python
使用Django启动命令行及执行脚本的方法
2018/05/29 Python
Sanic框架流式传输操作示例
2018/07/18 Python
python opencv实现图片旋转矩形分割
2018/07/26 Python
python 将日期戳(五位数时间)转换为标准时间
2019/07/11 Python
python 的 openpyxl模块 读取 Excel文件的方法
2019/09/09 Python
教师节横幅标语
2014/10/08 职场文书
2014年学习委员工作总结
2014/11/14 职场文书
2014小学二年级班主任工作总结
2014/12/05 职场文书
护士节慰问信
2015/02/15 职场文书
小学生学习保证书
2015/02/26 职场文书
倡议书的格式写法
2015/04/28 职场文书
五星红旗迎风飘扬观后感
2015/06/17 职场文书
使用nginx配置访问wgcloud的方法
2021/06/26 Servers
美国运营商 T-Mobile 以 117.83Mb/s 的速度排第一位
2022/04/21 数码科技