与css sprites的问题

Question

我正在尝试使用一些按钮创建悬停效果。我的css代码是

#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}

#home{left:0px;width:20px;}
#home{background:url("/Images/LandingPage/view_zoom_normal.png") 0 0 no-repeat;}
#home a:hover{background: url("/Images/LandingPage/view_zoom_minus_hover.png") 0 -20px no-repeat;}

#prev{left:20px;width:16px;}
#prev{background:url("/Images/LandingPage/view_zoom_normal.png") -36px -20px no-repeat;}
#prev a:hover{background: url("/Images/LandingPage/view_zoom_minus_hover.png") -36px -20px no-repeat;}

#next{left:36px;width:56px;}
#next{background:url("/Images/LandingPage/view_zoom_normal.png") -56px 36px no-repeat;}
#next a:hover{background: url("/Images/LandingPage/view_zoom_minus_hover.png") -56px -36px no-repeat;}

我的图片已附加，我无法创建正确的悬停效果。 Html代码是

<ul id="navlist">
    <li id="home"><a href="default.asp"></a></li>
    <li id="prev"><a href="css_intro.asp"></a></li>
    <li id="next"><a href="css_syntax.asp"></a></li>
</ul> 

更新：我想要的是当鼠标位于图像的负部分之外时，在图像1中，图像将变为突出显示减号按钮的图像，同样适用于加号。

任何帮助修复它将不胜感激。

Answer 1

您应该将：hover设置为id而不是a-tag。

#home:hover{background: url("/Images/LandingPage/view_zoom_minus_hover.png") 0 -20px no-repeat;}