Скажем, у меня есть CSS...
button:hover { font-weight: bold }
Как я могу предотвратить стили стилей :hover, по желанию? Мой целевой вариант использования - это когда элемент отключен. Например, с помощью этого HTML...
<button disabled>Click me</button>
... CSS :hover по-прежнему применяется. Кнопка исчезает, но эффект :hover все еще можно увидеть. Как это можно остановить?
pointer-events: никто не отключит все поведение наведения. очень полезно для отключенных элементов
button[disabled] {
pointer-events: none;
}
Я не думаю, что есть способ по-настоящему игнорировать набор стилей.
Однако вы могли бы создать более специфический стиль, который переопределяет стили hover.
button[disabled]:hover {
/* turn off button hover styles */
}
Я только что боролся с этой проблемой и придумал решение, используя 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;
}
После прочтения доступных ответов я обнаружил, что ни один из них не подходит для меня. Я все думал, что должно быть простое решение. В конце концов я просто привязал псевдоклассы. Это отлично работало.
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>Сделайте стиль наведения таким же, как и по умолчанию. Используйте имя класса, чтобы включить или отключить эту функцию.
<button class="disabled" disabled>Click me</button>
button.disabled:hover { font-weight: inherit}
Поместите свойство "transform: none" в свой класс переопределенных кнопок.