issue with css sprites

Question

I am trying to create the hover effect with some buttons. My css code is

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

and my images are attached, I am not able to create the right hover effect. Html code is

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

UPDATE : What I want is when mouse is over the minus part of the image, in image 1, image will change to the one in which minus button is highlighted, and same goes for the plus sign.

Any kind of help for fixing it will be appreciated.

Answer 1

You should set the :hover on the id's instead of the a-tag.

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