0

谁能帮我找出问题所在？我正在尝试使 css sprite 的活动状态起作用。

目前，它什么也没做

HTML

<ul id="nav">
    <li id="Contact"><a href="contact.html">Contact</a></li>
    <li id="Manual"><a href="manual.html">Manual</a></li>
    <li id="FAQ"><a href="faq.html">FAQ</a></li>
</ul>

CSS

#nav {
    background:url("../img/nav_final.png") no-repeat;
    width: 372px;
    height: 47.5px;
    margin: 70px auto;
    margin-bottom:25px;
    padding: 0;
}

#nav li, #nav a {
    height: 47.5px;
    display: block;
}

#nav li {
    float: left;
    list-style: none;
    display: inline;
    text-indent: -9999em;
}

#Contact { width: 120px; }
#Manual { width: 140px; }
#FAQ { width: 112px; }

#Contact a:hover, #Contact a:active { background:url("../img/nav_final.png") 0px -47.5px no-repeat; }
#Manual a:hover,  #Manual a:active  { background:url("../img/nav_final.png") -118px -47.5px no-repeat; }
#FAQ a:hover,  #FAQ a:active  { background:url("../img/nav_final.png") -260px -47.5px no-repeat; }

谢谢阅读

4

2 回答 2

0

:active 选择器是当您按下鼠标键时。不是当您在实际链接位置时。

于 2012-04-09T13:22:42.337 回答
0

尝试在导航内的链接上定义背景图像。background-repeat: no-repeat使用负定位时也会导致问题。

这是一个简化的测试用例

于 2012-04-09T13:29:10.413 回答