Question

任何人都可以帮我找出问题所在吗？我正在尝试使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; }

感谢您阅读

Answer 1

：当您按下鼠标键时，活动选择器。当你在实际的链接位置时不是。

Answer 2

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

Here is a reduced test-case

CSS sprite活动状态不起作用？

2 个答案: