Могу ли я остановить: наведите указатель на элемент?

Скажем, у меня есть CSS...

button:hover { font-weight: bold }

Как я могу предотвратить стили стилей :hover, по желанию? Мой целевой вариант использования - это когда элемент отключен. Например, с помощью этого HTML...

<button disabled>Click me</button>

... CSS :hover по-прежнему применяется. Кнопка исчезает, но эффект :hover все еще можно увидеть. Как это можно остановить?

Ответы

Ответ 1

pointer-events: никто не отключит все поведение наведения. очень полезно для отключенных элементов

 button[disabled] { 
      pointer-events: none;

    }

Ответ 2

Я не думаю, что есть способ по-настоящему игнорировать набор стилей.

Однако вы могли бы создать более специфический стиль, который переопределяет стили hover.

button[disabled]:hover {
  /* turn off button hover styles */
}

Ответ 3

Я только что боролся с этой проблемой и придумал решение, используя css3 not selector. Он не поддерживается более старыми браузерами IE, но вы можете использовать selectivizr.js(или другое), чтобы добавить функциональность

button {
  // styles for  non-disabled buttons
}

button:hover:not([disabled]) {
  // styles for hover on non-disabled
}

button[disabled] {
  cursor: default;
}

Ответ 4

После прочтения доступных ответов я обнаружил, что ни один из них не подходит для меня. Я все думал, что должно быть простое решение. В конце концов я просто привязал псевдоклассы. Это отлично работало.

button:enabled:hover { font-weight: bold }

Пример:

.hov:hover { color: red }
.hov2:enabled:hover { color: green }

<p>Without fix</p>
<button class="hov">Hover me</button>
<button class="hov" disabled>Hover me</button>
<p>With fix</p>
<button class="hov2">Hover me</button>
<button class="hov2" disabled>Hover me</button>

Ответ 5

Сделайте стиль наведения таким же, как и по умолчанию. Используйте имя класса, чтобы включить или отключить эту функцию.

<button class="disabled" disabled>Click me</button>

button.disabled:hover { font-weight: inherit}

Ответ 6

Поместите свойство "transform: none" в свой класс переопределенных кнопок.