CSSスプライトの背景が移動しない

Question

私はかなり単純なCSSスプライトコードでなければならないものに不満を感じ始めています。私は郡名のサイズより少し大きいリンクボックスの上にマウスを置いたときに郡名を拡大する郡の地図を作成しています。 ...ここで

は...

<ul id="counties"> 

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

</ul> 

2つの郡（私の元のコードでいくつかのより多くの郡がある）のための私のHTMLコードです...そしてここに私の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; from ## counties、

代わりに#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;}