JS之鼠标移入移出事件2

最新推荐文章于 2025-06-16 23:59:03 发布

原创最新推荐文章于 2025-06-16 23:59:03 发布 · 3.3k 阅读

0 ·

CC 4.0 BY-SA版权

自学第一课专栏收录该内容

11 篇文章

订阅专栏

这篇博客介绍了JavaScript中实现鼠标移入移出事件的两种方法，包括将事件监听代码置于body之前和代码末尾，详细阐述了它们的工作原理。

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

写了两种JS的方法，其实都是一样的。只不过一个是放在body之前，利用事件加载方法；一个是放在代码的最后面；

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#div1 {
				width: 200px;
				height: 200px;
				background: red;
				display: none;
			}
		</style>
		<script>			
			window.onload=function(){//onload在事件加载完成以后执行调用
			 var oBtn1=document.getElementById('showBtn');
			 var oBtn2=document.getElementById('hideBtn');
			 var oDiv=document.getElementById('div1');
			 var oSb=document.getElementById('sb');
			 
			 oBtn1.onclick=function(){
				oDiv.style.display='block';
				oDiv.style.background='yellow'
			 }
			 
			 oBtn2.onclick=function(){
			   oDiv.style.display='none';
			 }
			 
			 oSb.onmouseover=function(){
			 	oDiv.style.display='block';
				oDiv.style.background='yellow'
			 }
			 
			 oSb.onmouseout=function(){
			 	oDiv.style.display='none';
			 }
			}
		</script>
	</head>

	<body>
		<input id="showBtn" type="button" value="显示" />
		<input id="hideBtn" type="button" value="隐藏" />
		<strong id="sb">我也可以显示</strong>
		<div id="div1"></div>
		<!--<script>
	 	var oBtn1=document.getElementById('showBtn');
		var oBtn2=document.getElementById('hideBtn');
		var oDiv=document.getElementById('div1');
		var oSb=document.getElementById('sb');
		function show(){
			oDiv.style.display='block';
			oDiv.style.background='yellow'
		}
		oBtn1.onclick=show;
		oSb.onmouseover=show;
		oSb.onmouseout=hide;
		
		function hide(){
			oDiv.style.display='none';
		}
		oBtn2.onclick=hide;
	 </script>-->//第二种隐藏的代码段
	</body>

</html>

效果图如下：

2.第二种JS方法：

<script>
	 	var oBtn1=document.getElementById('showBtn');
		var oBtn2=document.getElementById('hideBtn');
		var oDiv=document.getElementById('div1');
		var oSb=document.getElementById('sb');
		function show(){
			oDiv.style.display='block';
			oDiv.style.background='yellow'
		}
		oBtn1.onclick=show;
		oSb.onmouseover=show;
		oSb.onmouseout=hide;
		
		function hide(){
			oDiv.style.display='none';
		}
		oBtn2.onclick=hide;
	 </script>