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 相关文章推荐
javascript 表单的友好用户体现
Jan 07 Javascript
JQuery的一些小应用收集
Mar 27 Javascript
javascript获取选中的文本的方法代码
Oct 30 Javascript
解析JavaScript中的不可见数据类型
Dec 02 Javascript
基于jquery实现在线选座订座之影院篇
Aug 24 Javascript
js仿苹果iwatch外观的计时器代码分享
Aug 26 Javascript
浅析js中substring和substr的方法
Nov 09 Javascript
JQuery实现DIV其他动画效果的简单实例
Sep 18 Javascript
微信小程序 地图map实例详解
Jun 07 Javascript
使用JS中的Replace()方法遇到的问题小结
Oct 20 Javascript
mint-ui在vue中的使用示例
Apr 05 Javascript
微信小程序使用setData修改数组中单个对象的方法分析
Dec 30 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 session应用实例 登录验证
2009/03/16 PHP
web站点获取用户IP的安全方法 HTTP_X_FORWARDED_FOR检验
2013/06/01 PHP
PHP基于ORM方式操作MySQL数据库实例
2017/06/21 PHP
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
2011/09/28 Javascript
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
2014/10/17 Javascript
js实现的动画导航菜单效果代码
2015/09/10 Javascript
JS禁用页面上所有控件的实现方法(附demo源码下载)
2015/12/17 Javascript
js判断当前页面在移动设备还是在PC端中打开
2016/01/06 Javascript
用JS动态改变表单form里的action值属性的两种方法
2016/05/25 Javascript
js将滚动条滚动到指定位置的简单实现方法
2016/06/25 Javascript
浅谈JavaScript 覆盖原型以及更改原型
2016/08/31 Javascript
BootStrap 可编辑表Table格
2016/11/24 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
2017/03/03 Javascript
JS实现图片点击后出现模态框效果
2017/05/03 Javascript
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
2017/11/09 Javascript
JS实现动态生成html table表格的方法分析
2018/07/11 Javascript
ES6 更易于继承的类语法的使用
2019/02/11 Javascript
Vue渲染过程浅析
2019/03/14 Javascript
JS关闭子窗口并且刷新上一个窗口的实现示例
2020/03/10 Javascript
基于ajax及jQuery实现局部刷新过程解析
2020/09/12 jQuery
[01:00:25]NB vs Secret 2018国际邀请赛小组赛BO1 B组加赛 8.19
2018/08/21 DOTA
Pandas时间序列重采样(resample)方法中closed、label的作用详解
2019/12/10 Python
详解Python3 中的字符串格式化语法
2020/01/15 Python
jupyter notebook插入本地图片的实现
2020/04/13 Python
CSS3动画animation实现云彩向左滚动
2014/05/09 HTML / CSS
Wiggle中国:英国骑行、跑步、游泳 & 铁三运动装备专卖网店
2016/08/02 全球购物
比较一下entity bean和session bean
2013/12/27 面试题
大学毕业生最详细的自我评价分享
2013/11/18 职场文书
社区健康教育工作方案
2014/06/03 职场文书
小学生教师节演讲稿
2014/09/03 职场文书
社区综治工作汇报
2014/10/27 职场文书
React Hook用法示例详解(6个常见hook)
2021/04/28 Javascript
Python机器学习算法之决策树算法的实现与优缺点
2021/05/13 Python
MySQL8.0无法启动3534的解决方法
2021/06/03 MySQL
一文搞懂redux在react中的初步用法
2021/06/09 Javascript
python文件与路径操作神器 pathlib
2022/04/01 Python