Menu
Let's say I have some CSS...
button:hover { font-weight: bold }
How can I prevent the :hover styles from being applied, at will? My target use case is when the element is disabled. For example, with this HTML...
<button disabled>Click me</button>
...the :hover CSS is still applied. The button gets faded out but the :hover effect can still be seen. How can this be stopped?
931
One method to do this is to add: pointer-events: none; to the element, you want to disable hover on. (Note: this also disables javascript events on that element too, click events will actually fall through to the element behind ).
If you have two elements in your HTML and you want to :hover over one and target a style change in the other the two elements must be directly related--parents, children or siblings. This means that the two elements either must be one inside the other or must both be contained within the same larger element.
pointer-events: none will disable all hover behavior. very usefull for disabled elements
button[disabled] { pointer-events: none; } I don't think there is a way to truly ignore a set of styles.
You could, however, create a more specific style that overrides the hover styles.
button[disabled]:hover { /* turn off button hover styles */ } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
