CODEWITHSUNDEEP
htmlcss
T. Stone
T. Stone

Reputation: 19495

Can I stop :hover from being applied to an element?

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?

Upvotes: 37

Views: 70546

Answers (7)

BuzzRage
BuzzRage

Reputation: 184

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.

Upvotes: 2

Trevor Yearwood
Trevor Yearwood

Reputation: 73

After reading the responses available I found none of them would be suitable for me. I kept thinking there must be a simple solution to this. In the end I just chained the pseudo classes. This worked perfectly.

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

Example:

.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>

Noticed I'm using if enabled pseudo code (:) and the hover pseudo code (:) code to perform the css.

I appreciated it's some time since this thread was opened, but thought it might help others.

Upvotes: 7

covfefe
covfefe

Reputation: 2675

Put the property 'transform: none' in your overridden button class.

Upvotes: -1

CodeToad
CodeToad

Reputation: 4724

pointer-events: none will disable all hover behavior. very usefull for disabled elements

 button[disabled] { 
      pointer-events: none;

    }

Upvotes: 76

joewoodward
joewoodward

Reputation: 263

I've just been struggling with this problem and came up with a solution using the css3 not selector. It's not supported by the older IE browsers but you can use selectivizr.js (or another) to add the functionality

button {
  // styles for  non-disabled buttons
}

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

button[disabled] {
  cursor: default;
}

Upvotes: 8

Jason McCreary
Jason McCreary

Reputation: 72981

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 */
}

Upvotes: 22

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114367

Make the hover style the same as the default. Use a class name to turn this feature on or off.

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

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

Upvotes: 2

Related Questions