qq延时窗口学习

最新推荐文章于 2024-11-21 21:27:19 发布

原创最新推荐文章于 2024-11-21 21:27:19 发布 · 102 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端学习

本文通过两个实例，详细展示了如何使用JavaScript实现鼠标悬停显示隐藏元素的效果。实例中运用了HTML、CSS和JavaScript，重点讲解了如何利用事件监听器和定时器控制元素的显示与隐藏，适用于网页交互设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

例一

<!DOCTYPE html>
<html>
<head>
	<title>js.xuexi</title>
	<style type="text/css">
		#div1{
			width: 300px;
			height: 50px;
			background: red;

		}
		#div2{
			margin-top: 10px;
			width: 200px;
			height: 20px;
			background: #ccc;
			display: none;
		}
	</style>
<script type="text/javascript">
	window.onload=function (){
		var oDiv1=document.getElementById('div1');
		var oDiv2=document.getElementById('div2');
		var timer=null;
		oDiv1.onmouseover=function show(){

			oDiv2.style.display='block';
			clearTimeout(timer);
		};
		function hide(){
			timer=setTimeout(function(){
				oDiv2.style.display='none';
			},300);
	
	
		};
		oDiv1.onmouseover=show;
		oDiv2.onmouseover=show;
		oDiv1.onmouseout=hide;
		oDiv2.onmouseout=hide;

	};

	
</script>
</head>
<body>
	<div id="div1">
		
	</div>
	<div id="div2">
		
	</div>
</body>
</html>

例二

在这里插入代码片

<!DOCTYPE html>
<html>
<head>
	<title>js.xuexi</title>
	<style type="text/css">
		#div1{
			width: 300px;
			height: 50px;
			background: red;

		}
		#div2{
			margin-top: 10px;
			width: 200px;
			height: 20px;
			background: #ccc;
			display: none;
		}
	</style>
<script type="text/javascript">
	window.onload=function (){
		var oDiv1=document.getElementById('div1');
		var oDiv2=document.getElementById('div2');
		var timer=null;
		oDiv1.onmouseover=function (){

			oDiv2.style.display='block';
			clearTimeout(timer);
		};
		oDiv1.onmouseout=function(){
			timer=setTimeout(function(){
				oDiv2.style.display='none';
			},300);
		oDiv2.onmouseover=function(){
			clearTimeout(timer);
		};
		oDiv2.onmouseout=function(){
			
			setTimeout(function(){oDiv2.style.display='none';},300)
		};	
		};
		

	};

	
</script>
</head>
<body>
	<div id="div1">
		
	</div>
	<div id="div2">
		
	</div>
</body>
</html>