Html
    Css
    Js

    
                        
* {
	margin:0;
	padding:0
}
li {
	list-style:none;
	float:left;
	width:50px;
	height:50px;
	line-height:50px;
	text-align:center;
	background:#666;
	color:#999
}
li:hover {
	cursor:pointer;
	background:orange;
	color:#fff
}
.active {
	background:orangered;
	color:#fff
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

jQuery导航选中状态(精简版)

主要解决了一个难题:点击选中后,需要移开鼠标才能显示选中后改变的背景色,否则显示的是鼠标移动上去的背景色。解决方案:通过遍历所有li,对所有li覆盖一层透明的背景色和字体颜色,实现覆盖鼠标移动上去的背景色。

0