js鼠标移入移出事件样例

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

梦康

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

阅读量1.5w

点赞数

分类专栏： JS

JS 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的鼠标移入移出事件示例。通过为页面上的多个<li>元素添加onmouseover和onmouseout事件，当鼠标悬停在元素上时改变其背景颜色和字体大小。

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

<html>
	<head>
		<title>javaScript实例</title>
		<style>
			li{background-color:#eee;height:25px;margin-top:2px;}
		</style>
		<script type="text/javascript">
			//添加鼠标移入移出事件
			function fun(){
				//获取所有li节点
				var list =  document.getElementById("uid").getElementsByTagName("li");
				//遍历所有li节点
				for(var i=0;i<list.length;i++){
					//添加鼠标移入事件
					list[i].onmouseover=function(){
						this.style.backgroundColor="#ffcc00";
						this.style.fontSize="20px";
					}
					//添加鼠标移出事件
					list[i].onmouseout=function(){
						this.style.backgroundColor="#eeeeee";
						this.style.fontSize="16px";
					}
				}
			}
		</script>
	</head>
	<body onload="fun()">
		<h2>JavaScript实例--JS中事件</h2>
		<ul id="uid">
			<li>aaaaaaaaaaaaaaa</li>
			<li>aaaaaaaaaaaaaaa</li>
			<li>aaaaaaaaaaaaaaa</li>
			<li>aaaaaaaaaaaaaaa</li>
			<li>aaaaaaaaaaaaaaa</li>
			<li>aaaaaaaaaaaaaaa</li>
			<li>aaaaaaaaaaaaaaa</li>
			<li>aaaaaaaaaaaaaaa</li>
		</ul>
		<table height="360" width="480">
		</table>
	</body>
</html>