8

非常に奇妙なこと..

ホバー時のリンクの文字色と背景色を変更したい。

これがコードです

CSS:

#link-menu a
{
    color:white;
    display:block;
    height:100%;
    width: 100%;
    text-decoration:none;
    text-align:center;
    line-height:45px;
    font-weight:bold;
    font-family:"trebuchet ms","comic sans ms";
    outline:none;
}

.link2 a:hover 
{
    color:black;
    background:white;
}

ホバーが機能していないわけではありません。背景色は変わりますが、文字色は変わりません。

もう 1 つの重要な事実は、クラス .link2 を使用する代わりに id を使用すると、色も変わるということです。問題は、クラスのみを使用する場合です。誰か理由と解決策を教えてください。

注：親要素IDを使用したくありません。すべてのリンクの背景を変更したくないためです。

4

3 に答える 3

21

その特異性の問題です。最初のセレクターは ID を持っているため、2 番目のセレクターをオーバーライドしています。あなたの唯一のオプションは、!importantルールを使用するか、親を2番目のセレクターの祖先として含めることです。

#link-menu a:hover {
    background: white;
    color: black;
}
于 2013-06-06T16:19:16.330 に答える
11 
#link-menu a

優先度が高くなります。2 番目のセレクターの優先度を上げる必要があります。!important を追加してみてください

.link2 a:hover 
{
    color:black !important;
    background:white;
}
于 2013-06-06T16:19:25.493 に答える
6

#link-menu a.link2 a:hover最初のものには ID が含まれ、2 番目のものには含まれていないため、よりも具体的です。

したがって、2 番目のルールのプロパティをオーバーライドします。

これを修正するには、両方が同じ特異性 ( の前:hover) を持つように変更するか、 を追加し!importantます。

于 2013-06-06T16:19:09.403 に答える