ボタンを無効にするとホバーが無効になります

Question

サイズ、色、効果の異なるボタンのセットを作成しました。緑のボタン、赤いボタン、e.t.c 下の青いボタンの1つです。あなたが見ることができるように、マウスのホバーで背景色が暗く変化します

無効なボタンのように見えるのは、1つのCSSクラス、.button-disabledだけです。ボタンが無効になっているときのホバー効果を削除する方法を解明しようとしています（下の例の2番目のボタンのように）

このクラスを異なる背景色のボタンに適用したい

.button-disabled:hover{ 
    background-color: /** Same as when not hovering **/ 
} 

.button{ 
 
    text-decoration: none; 
 
    border: none; 
 
    padding: 12px 20px; 
 
    cursor: pointer; 
 
    outline: 0; 
 
    display: inline-block; 
 
    margin-right: 2px; 
 
    color: #ffffff; 
 
    border-radius: 12px; 
 
} 
 

 
.button-blue{ 
 
    background-color: #3498db; 
 
} 
 

 
.button-blue:hover{ 
 
    background-color: #2980b9; 
 
} 
 

 
.button-blue:active{ 
 
    color: #3498db; 
 
    background-color: #ffffff; 
 
    box-shadow: 0px 0px 6px 2px rgba(0,0,0,0.2); 
 
} 
 

 
.button-disabled{ 
 
    opacity: 0.6; 
 
}

<button class="button button-blue">Enabled Button</button> 
 
<button class="button button-blue button-disabled" disabled>Disabled Button</button>

Answer 1

あなたはそれが何もしないことを確認するためにpointer-events: noneを使用することができます。「tはちょうどこのような何かを追加します。これは、任意のhover効果をブロックするか、または偶数番目の要素で起こっクリックする正しい方法です：

.button { 
 
    text-decoration: none; 
 
    border: none; 
 
    padding: 12px 20px; 
 
    cursor: pointer; 
 
    outline: 0; 
 
    display: inline-block; 
 
    margin-right: 2px; 
 
    color: #ffffff; 
 
    border-radius: 12px; 
 
} 
 
.button-blue { 
 
    background-color: #3498db; 
 
} 
 
.button-blue:hover { 
 
    background-color: #2980b9; 
 
} 
 
.button-blue:active { 
 
    color: #3498db; 
 
    background-color: #ffffff; 
 
    box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.2); 
 
} 
 
.button-disabled { 
 
    opacity: 0.6; 
 
    pointer-events: none; 
 
}

<button class="button button-blue">Enabled Button</button> 
 
<button class="button button-blue button-disabled" disabled>Disabled Button</button>

これは、ブラウザの新しいバージョンでのみ動作しますので、同じを使用することが常に優れています色は、同様に:hover状態を追加：

.button { 
 
    text-decoration: none; 
 
    border: none; 
 
    padding: 12px 20px; 
 
    cursor: pointer; 
 
    outline: 0; 
 
    display: inline-block; 
 
    margin-right: 2px; 
 
    color: #ffffff; 
 
    border-radius: 12px; 
 
} 
 
.button-blue { 
 
    background-color: #3498db; 
 
} 
 
.button-blue:hover { 
 
    background-color: #2980b9; 
 
} 
 
.button-blue:active { 
 
    color: #3498db; 
 
    background-color: #ffffff; 
 
    box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.2); 
 
} 
 
.button-blue.button-disabled:hover, 
 
.button-disabled { 
 
    opacity: 0.6; 
 
    background-color: #3498db; 
 
}

<button class="button button-blue">Enabled Button</button> 
 
<button class="button button-blue button-disabled" disabled>Disabled Button</button>

複数のクラスが定義されていて、各色のdisabledクラスを再定義する必要がある場合、これは苦痛になります。

Answer 2

使用属性セレクタまたはクラスセレクタと一緒にセレクタない

.button{ 
 
    text-decoration: none; 
 
    border: none; 
 
    padding: 12px 20px; 
 
    cursor: pointer; 
 
    outline: 0; 
 
    display: inline-block; 
 
    margin-right: 2px; 
 
    color: #ffffff; 
 
    border-radius: 12px; 
 
} 
 

 
.button-blue{ 
 
    background-color: #3498db; 
 
} 
 

 
.button-blue:not(.button-disabled):hover{ 
 
    background-color: #2980b9; 
 
} 
 

 
.button-blue:active{ 
 
    color: #3498db; 
 
    background-color: #ffffff; 
 
    box-shadow: 0px 0px 6px 2px rgba(0,0,0,0.2); 
 
} 
 

 
.button-disabled{ 
 
    opacity: 0.6; 
 
}

<button class="button button-blue">Enabled Button</button> 
 
<button class="button button-blue button-disabled" disabled>Disabled Button</button>

Answer 3

使用セレクタありません。これはIE8以降では機能しません。

.button{ 
 
    text-decoration: none; 
 
    border: none; 
 
    padding: 12px 20px; 
 
    cursor: pointer; 
 
    outline: 0; 
 
    display: inline-block; 
 
    margin-right: 2px; 
 
    color: #ffffff; 
 
    border-radius: 12px; 
 
} 
 

 
.button-blue{ 
 
    background-color: #3498db; 
 
} 
 

 
.button-blue:hover:not(.button-disabled){ 
 
    background-color: #2980b9; 
 
} 
 

 
.button-blue:hover:not([disabled]){ 
 
    background-color: #2980b9; 
 
} 
 

 
.button-blue:active{ 
 
    color: #3498db; 
 
    background-color: #ffffff; 
 
    box-shadow: 0px 0px 6px 2px rgba(0,0,0,0.2); 
 
} 
 

 
.button-disabled{ 
 
    opacity: 0.6; 
 
}

<button class="button button-blue">Enabled Button</button> 
 
<button class="button button-blue button-disabled" disabled>Disabled Button</button>