DOM小练习-列表鼠标移入高亮

HTML

<ul>
	<li>首行</li>
	<li>111</li>
	<li>222</li>
	<li>333</li>
	<li>444</li>
	<li>555</li>
	<li>666</li>
	<li>777</li>
	<li>888</li>
	<li>999</li>
	<li>尾行</li>
</ul>

CSS

*{
	margin: 0;
	padding: 0;
}
ul{
	width: 200px;
	margin: 30px auto 0;
	text-align: center;
}
li{
	list-style: none;
	height: 30px;
	line-height: 30px;
	background: #ccc;
	color: #fff;
	border-bottom: 1px solid #fff;
}
li:nth-of-type(1),
li:nth-last-of-type(1){
	background: #2A2A2A;
}
li.act{
	background: #2A2A2A;
	color: blue;
}
li.near{
	background: #777;
}
li.tip{
	background: orangered;
}

JS

var aLi=document.getElementsByTagName("li");
for (var i=0;i<aLi.length;i++) {
	aLi[i].οnmοuseοver=function(){
		for (var i=0;i<aLi.length;i++) {
			aLi[i].className="";
		}
		this.className="act";
		this.nextElementSibling.className="near";
		this.previousElementSibling.className="near";
		aLi[0].className="";
		aLi[aLi.length-1].className="";
	}
	
	aLi[i].οnmοuseοut=function(){
		for (var i=0;i<aLi.length;i++) {
			aLi[i].className="";
		}
	}
}
aLi[0].οnmοuseοver=function(){
	this.className="tip";
}
aLi[aLi.length-1].οnmοuseοver=function(){
	this.className="tip";
}

　　

转载于:https://www.cnblogs.com/yangxue72/p/8005731.html