私はとのリンクがあります。a:hoverスタイルを通常のスタイルと同じようにオーバーライドしますか?
- - 背景色:赤;
- 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クラスを作成する必要がありますか?
これは非常に賢いです!それを使うことは決して考えられませんでした。これはポインターイベントを一緒に無効にする問題があるため、カーソルのようなものを試してみると意味します。つまり、無効なクラスの.disabledクラスでは動作しません。 – AlfaTeK
それで解決できましたか? –
a:not(.disabled):hoverを使用すると、私が避けようとしていることを実行する必要があります。a:not(.disabled):ホバー、a - myBlueLink:not(.disabled):ホバーとa-- myYellowLink:not(.disabled):ホバー。それは動作しますが、青、赤、黄色のリンクに対して3つの違うクラスを作成するのと同じトラブルが発生します。 私はあなたの編集から、背景色を無駄にする方法がないことを知っています:緑色の指示とそれを「周囲」で処理しなければなりませんか? – AlfaTeK