为什么我的a:hover鼠标事件像老师那样写就显示不出效果呢？class=”on“这个也没用，首页没有一直是橘黄色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>垂直导航</title>
<link rel="stylesheet" type="text/css">
<style>
*{margin:0;padding:0;font-size: 14px;}
.shuipin_nav a:hover{
background-position: 0 -30px;
color: #fff;
}
.on a:hover{background-position: 0 -30px;}
.shuipin_nav li{
float:left;
margin-top: 20px;
}
.shuipin_nav{
height: 50px;
border-bottom: 5px solid #f60;
padding-left: 30px;
list-style: none;
}
.shuipin_nav li a{
text-decoration:none;
display: block;
height: 30px;
width: 120px;
line-height: 30px;
text-align: center;
background: #ccc;
margin-bottom:1px;
background: url(img/btnBg.png);
}
</style>
</head>
<body>
<div>
<ul>
<li><a href="#" >首 页</a></li>
<li><a href="#">新闻快讯</a></li>
<li><a href="#">产品展示</a></li>
<li><a href="#">售后服务</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
</body>
</html>
