無効化されていない場合にのみホバーとアクティブ

186

ボタンのスタイルを設定するには、ホバー、アクティブ、無効を使用します。

しかし、問題は、ボタンが無効になっているときにホバーとアクティブなスタイルが引き続き適用されることです。

有効なボタンにのみホバーとアクティブを適用する方法は？

css

— アリ
ソース

329

：enabled疑似クラスを使用できますが、notice IE<9はサポートしていません。

button:hover:enabled{
    /*your styles*/
}
button:active:enabled{
    /*your styles*/
}

— エンジニア
ソース

3

:not()セレクターもありますが、IE9以降もサポートされています。参照：developer.mozilla.org/en-US/docs/Web/CSS/

— not

button:hover:enabled私の場合はうまくいかなかったようです。IE11でのIE9エミュレーションの使用。

— Neolisk 2017

75

.button:active:hover:not([disabled]) {
    /*your styles*/
}

あなたはこれを試すことができます。

— ベラユタムアンジャマニ
ソース

これは、「ホバー無効」状態を「非ホバー無効」状態と同じに見せる場合に適したソリューションです。

— Mikhael Loo 2016

私はこのソリューション<3です。：not（.no-hover）を使用するだけで、<button class = "button"> hovers </ button>および<button class = "button no-hover> doesnt not hover </ button>を使用できます。

— Ben

35

CSSで「無効」属性を使用しないのはなぜですか。これはすべてのブラウザで機能する必要があります。

button[disabled]:hover {
    background: red;
}
button:hover {
    background: lime;
}

— マデフ
ソース

13

1行ですべてを選択することで、すべての無効状態をカバー：.button[disabled], .button[disabled]:hover, .button[disabled]:focus, .button[disabled]:active {}

— DBK

13

最新のブラウザ（IE11 +、および一部の携帯オペラ＆IEブラウザを除く-で動作し、低特異性のアプローチhttp://caniuse.com/#feat=pointer-events）：

.btn {
  /* base styles */
}

.btn[disabled]
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

.btn:hover {
  color: red;
}

pointer-events: noneルールはホバー無効になります。.btn[disabled]:hoverホバースタイルを無効にするために、セレクターで具体性を上げる必要はありません。

（参考までに、これは単純なHTMLポインターイベントであり、問題のある抽象化入力デバイスポインターイベントではありません）

— ミチャイ
ソース

12

sass（scss）：

 button {
  color: white;
  cursor: pointer;
  border-radius: 4px;

  &:disabled{
    opacity: 0.4;

    &:hover{
      opacity: 0.4;  //this is what you want
    }
  }

  &:hover{
    opacity: 0.9;
  }
}

— jakeforaker
ソース

10

LESSまたはを使用している場合はSass、これを試すことができます：

.btn {
  &[disabled] {
    opacity: 0.6;
  }
  &:hover, &:active {
    &:not([disabled]) {
      background-color: darken($orange, 15);
    }
  }
}

— fatlinesofcode
ソース

ブロックしないでラップしない限り、無効化されたボタンに対してホバー効果が処理されるため、これはSASSの優れたソリューションです。

— mbokil

2

1つの方法は、ボタンを無効にし、CSSでそのクラスのホバー状態とアクティブ状態をオーバーライドしながら、特定のクラスを追加することです。または、CSSでのみそのクラスのホバーとアクティブな疑似プロパティを無効にして指定するときにクラスを削除します。どちらにしても、CSSだけでは実現できない可能性が高いので、少しjsを使用する必要があります。

— techfoobar
ソース