Can I stop :hover from being applied to an element

Question

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?

Answer 1

Another way to do this (but not as efficient as using pointer-events: none; ), is to set the same properties on both "disabled" and "hover when disabled":

input:hover{
    color: #0CB;
}

input[type=button]:hover:disabled{
    color: grey;
}

<input type="button" value="Try Me !" />
<input type="button" value="Why not Me ?" disabled/>

It's not the most beautiful, but it works too.