初学JS值之用JS实现鼠标移入移出事件

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

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

2 ·

CC 4.0 BY-SA版权

初战专栏收录该内容

3 篇文章

订阅专栏

这篇博客介绍了如何使用JavaScript来实现鼠标移入和移出事件，以展示一个简单的导航菜单。当鼠标移入`#list`元素时，显示子菜单`#list1`并改变父链接的背景颜色；鼠标移出时，隐藏子菜单并恢复背景颜色。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>初学JS</title>
		<style>
		#webo{
			width:82px;
			height:123px;
		}
		  li{
		  	list-style:none;		  
		  }
		  
		  #list{
		  	width:80px;
		  	height:	30px;
		  	position: relative;
		  }
		  
		 a{
		  	color:black;
		  	text-decoration:none;
		  	display: block;	
		  	line-height: 30px;
		  	text-align: center;
		  	background: white;  	
		  }
		  
		#list1{
			margin:0;
		  	padding:0;
		  	width:80px;
		  	display: none;   
		}
		
	   #list1 li{
	   	   line-height:30px;
	   	   text-align: center;
	   	   border:	1px solid orange;	
	   	   border-top:none;
	   }			
			
		</style>
	</head>
	<body>
	 <div id="webo">
		<ul>
			<li id="list">
				<a id="link" href="#">微博</a>
			</li>
				<ul id="list1">
					<li><a id="sx" href="#">私信</a></li>
					<li><a id="pl" href="#">评论</a></li>
					<li><a id="zw" href="#">@我</a></li>
				</ul>
		</ul>
	 </div>
		<script>
			document.getElementById("list").onmouseover=show;
			document.getElementById("list").onmouseout=hide;
			
			function show(){
				document.getElementById("list1").style.display="block";	
				document.getElementById("link").style.background="darkorange";				
			}
			
			function hide(){
				document.getElementById("list1").style.display="none";	
				document.getElementById("link").style.background="white";
			}
			
		</script>
	</body>
</html>