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

删除 background：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;}

CSS精灵背景不会改变

1 个答案: