css - css Sprite 问题

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;}