（19）延时提示框--模仿QQ鼠标移进头像的时候会显示相应的资料过程

最新推荐文章于 2022-05-26 07:00:00 发布

无人与我共黄昏

最新推荐文章于 2022-05-26 07:00:00 发布

阅读量1.9k

点赞数

分类专栏： JavaScript案例解析

本文链接：https://blog.csdn.net/Xuan6251237011/article/details/27819317

版权

JavaScript案例解析同时被 2 个专栏收录

42 篇文章 0 订阅 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

JavaScript代码

42 篇文章 0 订阅

订阅专栏

该博客介绍了如何实现鼠标移入头像时显示延时提示框的效果，类似于QQ头像悬停显示个人资料。程序包括鼠标移入显示灰色方框，移出后延迟半秒隐藏方框的逻辑。内容涵盖不同鼠标状态下的交互行为，如在红色和灰色区域内移动的响应。

摘要由CSDN通过智能技术生成

当鼠标移到头像的时候会显示出相应的内容，但是如果鼠标移出之后就会隐藏相应的内容，整个过程跟用鼠标指向QQ头像的过程一样，下面是简单的程序实现：

<!DOCTYPE HTML>
<!--
	
-->
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
   float:left;
   margin-left: 10px;
}
#div1{
	width: 50px;
	height: 50px;
	background: red;
}	

#div2{
	width:250px;
	height: 250px;
	background: #ccc; 
	display: none;
}

</style>

<script type="text/javascript">
window.οnlοad=function(){


	var oDiv1=document.getElementById('div1');
	var oDiv2=document.getElementById('div2');
	var timer&#