252

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

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

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

4

8 に答える 8

447

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

button:hover:enabled{
    /*your styles*/
}
button:active:enabled{
    /*your styles*/
}
于 2012-07-22T13:32:48.510 に答える
105 
.button:active:hover:not([disabled]) {
    /*your styles*/
}

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

于 2014-05-09T10:34:34.843 に答える
40

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

button[disabled]:hover {
    background: red;
}
button:hover {
    background: lime;
}
于 2013-12-02T06:29:12.380 に答える
24

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

.btn {
  &[disabled] {
    opacity: 0.6;
  }
  &:hover, &:active {
    &:not([disabled]) {
      background-color: darken($orange, 15);
    }
  }
}
于 2015-06-11T07:43:45.250 に答える
16

sass（s​​css）：

 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;
  }
}
于 2014-09-19T21:42:14.777 に答える
16

最も軽いタッチを使用します：ルールの順序でオーバーライドします。

.btn {
  /* base styles */
}

.btn:hover {
  color: red;
}

.btn:active {
  color: green;
}

.btn:disabled {
  color: #aaa;
}

秘訣は順序です。無効になっていないすべての状態を最初に適用し、それらすべてが同じ特異性を持っていることを確認し、最後に同じ特異性で無効にします。

disabledこれは、リンクに追加されたクラス、またはプロパティを持たない非対話型要素では機能しません。

（より特異性の高いルールを削除するために編集され、pointer-events）

于 2016-09-19T15:48:46.277 に答える
2

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

于 2012-07-22T13:37:26.337 に答える
0

私のプロジェクトでは以下のものを使用しています。

.bg-brand-3 {
  background-color: black;
  &[type="button"]:enabled {
    &:hover {
      background-color: orange;
    }
    &:active {
      background-color: green;
    }
  }
  &[type="submit"] {
    // css
  }
}

と:enable同じ意味です:not(:disabled)

于 2021-10-05T04:41:57.197 に答える