CSS Sprite 背景不移动

Question

我对本应相当简单的 CSS Sprite 代码感到越来越沮丧。我一直在做一个县城 map ，当鼠标悬停在比县城名称大一点的链接框上时，县城名称会放大。

这是我的两个县的 html 代码(我的原始代码中还有几个县)...

<ul id="counties">

<li id="russell"><a href="index.html">Russell</a></li>
<li id="smyth"><a href="index.html">Smyth</a></li>

</ul>

...这是我的 CSS 代码...

#counties {
background: url(./LINKS/counties_hover_map.png) no-repeat;
width: 750px;
height: 648px;
position: relative;
}
#counties li {list-style: none; display: block; position: absolute;}
#counties a {display: block; text-indent: -9999px; text-decoration: none;}

#russell {left: 244px; top: 112px; width: 161px; height: 56px;}
#russell a {height: 56px; border: none; outline: none;}
#russell a:hover{background-position: 0px -680px;}

#smyth {left: 510px; top: 164px; width: 144px; height: 56px;}
#smyth a {height: 56px; border: none; outline: none;}
#smyth a:hover {background-position: 0px -784px;}

...任何见解将不胜感激。谢谢。

Answer 1

删除背景:url(./LINKS/counties_hover_map.png) 不重复；来自##县，

改为将该行添加到#counties a。

所以它变成了:

    #counties {
    width: 750px;
    height: 648px;
    position: relative;
    }
    #counties li {list-style: none; display: block; position: absolute;}
    #counties a {
    display: block; text-indent: -9999px; text-decoration: none;
background: url(./LINKS/counties_hover_map.png) no-repeat;
}

    #russell {left: 244px; top: 112px; width: 161px; height: 56px;}
    #russell a {height: 56px; border: none; outline: none;}
    #russell a:hover{background-position: 0px -680px;}

    #smyth {left: 510px; top: 164px; width: 144px; height: 56px;}
    #smyth a {height: 56px; border: none; outline: none;}
    #smyth a:hover {background-position: 0px -784px;}