3

どういうわけか、理由はよくわかりませんが、以下はうまくいきません。背景の位置は、ホバーしても同じままです。理由がわかりません。別の方法でそれを行うこともできますが、なぜそれが機能しないのかを突き止めたいと思います。

#nav a:link, #nav a:visited {
    background:url(../img/nav-sprite.png) no-repeat;
    display:block;
    float:left;
    height:200px;
    padding:10px;
    text-indent:-9999px;
    border:solid 1px red;
}

    #nav a#home {
        background-position:-10px 0px;
        width:30px;
    }
    #nav a#about-us {
        background-position:-85px 0px;
        width:45px;
    }

#nav a:hover    {
    background-position:1px -15px;
}

誰かがこれを引き起こしている可能性があることを知っていますか？

前もって感謝します！

ライアン

4

4 に答える 4

7

IDセレクターは、疑似クラスセレクターよりも優先されます。

したがって、#ルールはルールによって上書きされません:。

！importantディレクティブを使用する

#nav a:hover    {
    background-position:1px -15px!important;
}

またはルールをより具体的にする

#nav a#home:hover, #nav a#about-us:hover    {
    background-position:1px -15px;
}
于 2010-04-15T10:48:40.070 に答える
3

#nav a#home#nav a#about-us（id> pseudo-class）よりも特異性が高いため#nav a:hover、後者は適用されません。#nav a#home:hoverここで動作し#nav a#about-us:hoverます。

カスケードを参照してください。

于 2010-04-15T10:46:06.487 に答える
1

これを試して：

#nav a#home:hover, #nav a#about-us:hover    {
    background-position:1px -15px;
}
于 2010-04-15T10:47:15.737 に答える
0

私はそれがもう関係がないことを知っていますが、誰かがここに来るなら、もう1つのオプションがあります：

IDをクラスに変更します。<a id="home"> 使用の代わりに<a class="home">。次に、スタイルをからに変更するa#homeとa.home、機能します。

完全なコード：

<div id="nav">
    <a href="#" class="home">Home</a>
    <a href="#" class="about-us">About Us</a>
</div>

<style>
        #nav a:link, #nav a:visited
        {
            background: url('smile-icon.jpg') no-repeat;
            display: block;
            float: left;
            height: 140px;
            padding: 10px;
            text-indent: -9999px;
            border: solid 1px red;
        }

        #nav a.home
        {
            background-position: -10px 0px;
            width: 30px;
        }

        #nav a.about-us
        {
            background-position: -85px 0px;
            width: 45px;
        }

        #nav a:hover
        {
            background-position: 1px -15px;
        }
    </style>
于 2013-06-27T18:54:52.303 に答える