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

Ответ 1

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

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

Ответ 2

Попробуйте (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;   
}

Ответ 3

Вы можете использовать отрицательный псевдо-селектор классов (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;   
}

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

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

• поддержка браузера селекторов css2
• поддержка браузера для селекторов css3

Обновление с помощью взлома для использования селекторов css2

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

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

Ответ 4

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

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

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

Ответ 5

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

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