0

誰でも問題が何であるかを見つけるのを手伝ってもらえますか? CSSスプライトのアクティブ状態を機能させようとしています。

現時点では、何もしていません

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 に答える