Как я могу заставить CSS Hover не работать, если кнопка отключена?

У меня есть этот CSS:

html.darkBlue .btn1 button:hover:not(.nohover) {
  background: #0007d5;
  border: 1px solid #0007d5;
  color: white;
}

Я довольно смущен отключением. Как я могу сделать так, чтобы этот CSS не работает, если кнопка отключена?

10
css

5 ответов

Если вам не нужно поддерживать IE :enabled псевдокласс.

html.darkBlue .btn1 button:hover:enabled {
    background: #0007d5;
    border: 1px solid #0007d5;
    color: white;
}
20

попробуйте с (demo http://jsfiddle.net/JDNLk/)

HTML-код

<button class="btn1" disabled="disabled">disabled</button>
<button class="btn1">enabled</button>

в CSS

html.darkBlue .btn1 button:hover:not([enabled="enabled"]) {
  background: #0007d5;
  border: 1px solid #0007d5;
  color: white;   
}
2

можно использовать селектор псевдо-класса отрицания (CSS 3). Я не уверен, что есть также решение, использующее селекторы атрибутов (CSS 2.1).

учитывая этот html

  <div class="darkBlue">
    <h2>disable hover for disabled buttons</h2>
    <div class="btn2">
      <button>hover enabled</button>    <br/>     
      <button disabled="disabled">hover disabled</button>         
    </div>  
  </div>

и это css

.darkBlue .btn2 button:hover:not([disabled="disabled"]) {
  background: #0007d5;
  border: 1px solid #0007d5;
  color: white;   
}

вы можете добиться того, что каждая кнопка внутри селектора matiching не имеет примененного стиля наведения. См..

на caniuse.com Вы можете найти таблицы, сравнивать браузер поддерживает какой селектор

обновление с помощью взлома, чтобы иметь возможность использовать селекторы css2

это хак и еще не совсем то же самое, но в случае, если вы ограничены css 2.1 это может быть отправной точкой. Если вы определяете отдельное правило стиля для отключенных кнопок и используете цвет, который вы выбрали для отключенные кнопки вы можете подделать отключенный стиль наведения:

.btn3 button[disabled="disabled"]:hover
{
  background-color: rgb(212, 208, 200);
  color: rgb(128, 128, 128);  
}
2

используйте селектор атрибутов CSS: Not только для целевых элементов, у которых нет отключенного атрибута.

html.darkBlue .btn1 button:not([disabled]):hover

таким образом, ваш стиль парить будет применяться только к кнопкам, которые не отключаются.

1
.btn:disabled:hover{color:default-color;background:default prop}

. или. btn: disabled{pointer-events: none}

0