CODEWITHSUNDEEP
css
POV
POV

Reputation: 12025

Hover effect if button is not disabled?

I have the following CSS rule:

button.medium.fade-btn:hover:not([disabled]) {
  color:red;
}

And HTML code:

<button class="medium fade-btn" disabled></button>

I need that hover effect works only when button is not disabled.

Upvotes: 3

Views: 4873

Answers (1)

fwr nr
fwr nr

Reputation: 697

You haven't structured your selector properly

button.medium.fade-btn:hover:not([disabled])

In theory selects nothing, but is searching the children of button (which there are none) due to you putting it after the hover.

button.medium.fade-btn:not([disabled]):hover

Is the correct way.

Hover is the event so you want that happening on the not disabled button so it comes after everything else. Select the element and then use the hover as the last part. It may be easier to work with disabled: true/false as well.

Edit: This is either a browser compatibility problem, or your browser isn't liking just using disabled in the type selector. You should try using disabled=true in your selector and checking your browser version against the versions that :not() is supported in.

Upvotes: 5

Related Questions