背景色を元に戻す方法：フォーカス？

Question

Twitter Bootstrapはbackground-colorのプロパティを持っていますが、特定のナビゲーション要素の宣言を元に戻したいと思っています。

たとえば、カスタムアイテムの中には、ナビゲーションアイテムがデフォルト状態のとき、その背景色が濃い赤色であるとします。そして、その上にマウスを置くと、明るい赤色に変わります。

:focus状態のBootstrapの宣言のために、ナビゲーション項目をクリックしてマウスを離すと、明るい灰色（デフォルトのBootsrapテーマから）になります。これは私が取り除きたいものです。

私がここで達成したいのは、アイテムをクリックすると、そのマウスの上にマウスが置かれていない場合は暗赤色を意味し、マウスがその上にあるときは赤色を意味する、デフォルトの動作を維持する必要があります。しかし、:focusの状態が:hoverの状態をオーバーライドしているようだから、:focusのために宣言しようとすると、マウスオーバーとマウスの両方で動作します。

また、background-color:transparentとbackground-color:inheritを試しました。しかし、問題は常に同じです。つまり、色がどのようにレンダリングされても、マウスがリンク上にあるかどうかに関わらず、そのままにしておきます。そのリンクにフォーカスがあっても、背景色がホバー上で変化し続けるようにしたい。

Answer 1

あなたの特別な要素に余分なクラスを置き、CSSを設定します。

.ExtraClass:focus{ 
    color: #FFF !important; 
} 

.ExtraClass:hover{ 
    color: #000 !important; 
} 

.ExtraClass{ 
    color:#555 !important; 
}