JS之鼠标移入移出事件2

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

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

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

1.

<!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>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值