a：hoverスタイルを通常のスタイルと同じようにオーバーライドしますか？

Question

私はとのリンクがあります。

• - 背景色：赤;
• a：ホバー - 背景色：緑;このない私は今、（他の背景色で）ここに適用することが「無効」と他のリンクで新しいグローバルクラスを作成してい

：

• a.disabled - 不透明度：0.7; （最初の例では、不透明度0.7の背景赤を示しています）
• a.disabled：ホバー - a.disabledと同じです。 （最初の例では、不透明度0.7と赤の背景を示すはずである）

基本的に無効クラスは、背景色を変更する「ホバー」効果を無効にします。

これはグローバルクラスとして機能する解決策を見つけるのに苦労しています（明らかに、私はa.disabled：hover background-color：redを設定しています）。

a { 
 
    display: inline-block; 
 
    width: 300px; 
 
    height: 100px; 
 
    background-color: red; 
 
    border: 1px solid gray; 
 
} 
 

 
a:hover { 
 
    background-color: green; 
 
} 
 

 
.disabled { 
 
    opacity: 0.7; 
 
} 
 

 
.disabled:hover { 
 
    opacity: 0.7; 
 
    background-color: initial; 
 
}

<a href="#">click me</a> 
 
<a href="#" class="disabled">disabled me</a>

主な問題はここにある：

.disabled:hover { 
    opacity: 0.7; 
    background-color: initial; 
} 

私は基本的には「ヌル」バックグラウンド背景色を置くために価値を把握することはできません通り色：緑の指示。

もう一度：「赤色」に設定することがわかります。しかし、私は青と黄色の背景色を持つ他のリンクがあり、その場合は動作しません。

これを達成するための賢明な、グローバルな方法はありますか、私は '青、赤、黄色'のリンクに対して異なる.disabledクラスを作成する必要がありますか？

Answer 1

これまでの方法があります：

ちょうどあなたを置く防ぐために：

a.disabled{ 
    pointer-events:none; 
} 

実はそれだけでその背景を維持するだけではありません、それは

編集あまりにもクリックイベントを無効にしますa:hoverは次のように変更してください。

a:not(.disabled):hover 

そして.disabled:hover

（OR）

を削除するには、あなたはCSSを共通にする場合の構造を変更する必要がないようです：私は考えることができる んが、他の方法：

.linkBlue:hover{ 
 
    background-color:blue; 
 
    } 
 

 
.linkRed:hover{ 
 
    background-color:red; 
 
    } 
 

 
.linkYellow:hover{ 
 
    background-color:yellow; 
 
    } 
 

 
.linkGreen:hover{ 
 
    background-color:green; 
 
    } 
 

 
.disabled{ 
 
    cursor:not-allowed; 
 
    } 
 

 
.disabled a 
 
{ 
 
    pointer-events:none; 
 
}

<a class="linkBlue">Link1</a> 
 
<span class='disabled'><a class="linkRed">Link1</a></span> 
 
<a class="linkYellow">Link1</a> 
 
<span class='disabled'><a class="linkGreen">Link1</a></span>

Answer 2

CSS仕様の初期値は、

です。

各プロパティには、プロパティの 定義テーブルで定義されている初期値があります。プロパティが継承されたプロパティではなく、 カスケードが値にならない場合、指定された値 はその初期値です。

背景色プロパティの初期値は透明です。これが理由で、

が期待される出力と異なっています。

しかし、あなたは他の方法でそれを行うことができます。このCSSを試してください。それが助けてくれることを願って。

a:not(.disabled):hover { 
    background-color: green; 
} 

.disabled:hover { 
    opacity: 0.7; 
}