JS实现延迟隐藏功能的方法(类似QQ头像鼠标放上展示信息)
时间:2019-04-12
本文章向大家介绍JS实现延迟隐藏功能的方法(类似QQ头像鼠标放上展示信息),主要包括JS实现延迟隐藏功能的方法(类似QQ头像鼠标放上展示信息)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
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头像鼠标放上展示信息)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
- 我的WCF之旅(10):如何在WCF进行Exception Handling
- 安装nginx出现的问题
- 18.11 LVS DR模式搭建
- Linux基础(day64)
- 我的WCF之旅(9):如何在WCF中使用tcpTrace来进行Soap Trace
- 物联网设备已沦陷,咖啡机也不能例外
- 我的WCF之旅(13):创建基于MSMQ的Responsive Service
- 开发自己的Data Access Application Block[上篇]
- 18.9/18.10 LVS NAT模式搭建
- 谈谈WCF中的Data Contract (1):Data Contract Overview
- Linux基础(day66)
- 字符串的驻留(String Interning)
- 19.5 忘记Admin密码如何做
- 19.3/19.4/19.6 安装zabbix
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- POJ - 2387 Til the Cows Come Home (最短路入门)
- POJ - 3074 Sudoku (搜索)剪枝+位运算优化
- C语言rand随机函数问题
- HDU - 1253 胜利大逃亡(搜索)
- Android7.0版本影响开发的改进分析
- POJ - 2251 Dungeon Master(搜索)
- An Overview of PostgreSQL & MySQL Cross Replication
- POJ - 1321 棋盘问题
- CREATE TABLE ... WITH storage_parameter [= value] [, ... ]
- Windows窗口模板
- TabLayout关联ViewPager后不显示文字的解决方法
- POJ - 3278 Catch That Cow 简单搜索
- Codeforce 239 B. Easy Tape Programming
- Codeforces Round #530 (Div. 1) 1098A Sum in the tree
- 非易失性WAL buffer实现解析(三)