js鼠标移入移出事件样例

最新推荐文章于 2024-04-29 14:41:33 发布

梦康

最新推荐文章于 2024-04-29 14:41:33 发布

阅读量1.5w

点赞数

分类专栏： JS

JS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<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].οnmοuseοver=function(){
						this.style.backgroundColor="#ffcc00";
						this.style.fontSize="20px";
					}
					//添加鼠标移出事件
					list[i].οnmοuseοut=function(){
						this.style.backgroundColor="#eeeeee";
						this.style.fontSize="16px";
					}
				}
			}
		</script>
	</head>
	<body οnlοad="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>

梦康

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
js鼠标移入移出事件样例

javaScript实例 li{background-color:#eee;height:25px;margin-top:2px;} //添加鼠标移入移出事件 function fun(){ //获取所有li节点 var list = document.getElementById("uid").getElementsByTagName("li
复制链接

扫一扫