鼠标滑过字体加粗、背景变色的CSS导航栏


一个简单的导航背景滑过变色效果，鼠标滑出时字体变粗，菜单栏背景换色，常用到的一CSs小技巧，不用JavaScript帮忙，CSS就可实现，符合WEB标准，兼容性也可以。

答案：<html>
<head>
<title>背景变色导航栏</title>
<style>
.wrap{width:210px;margin:20px 300px;}
.wrap ul,#listA li{padding:0;margin:0;list-style:none;font-size:12px;}
#listA li.on{background:#ccc;background:#f6f6f6;font-weight:bold;}
.wrap ul{width:210px;border:solid 1px #eee;border-bottom:none}
#listA li{height:24px;line-height:24px;padding:0 15px;border-bottom:solid 1px #eee;background:#fdfdfd;color:#cc0000}
#listA li span{float:right}
#listA li a{color:#cc0000;text-decoration:none}
#listA li a:hover{color:#000099;text-decoration:underline}
</style>
</head>
<body>
<div class="wrap">
<ul id="listA">
<li><span><a href="#">查看</a></span>jQuery</li>
<li><span><a href="#">更多</a></span><a href="/">Delphi</a></li>
<li><span><a href="#">发布</a></span><a href="/">Ajax</a></li>
<li><span>发布</span><a href="/guestbook/">GuestBook</a></li>
</ul>
</div>
<script type="text/javascript">
<!--
var ul = document.getElementById("listA");
var li = ul.getElementsByTagName("li");
for(var i=0;i<li.length;i++){
		li[i].onmouseover=function(){
		for(var j=0;j<li.length;j++){
			li[j].className=""
		}
		this.className="on"
		}
}
-->
</script>
</body>
</html>

上一个：符合标准的滑动门（JS+CSS）
下一个：带圆角的纯CSS下拉导航菜单

更多图片编程知识: