CSS精灵背景不会移动

Question

我已经变得越来越沮丧，应该是相当简单的CSS精灵代码。我一直在制作一张县地图，当鼠标停留在比县名大一点的链接框上时，它会放大县名。

这是我的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) no-repeat;从# #县、

将该行改为#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;}