CODEWITHSUNDEEP
htmlcss
user1943020
user1943020

Reputation:

How can I make my disabled button not change color when there's a hover with CSS?

I tried this CSS:

html.dark .btn:hover:not(disabled),
html.dark .btn:focus {
  color: #ffffff;
  background-color: #222222;
  *background-color: #151515;
}
html.dark .btn.disabled,
html.dark .btn[disabled] {
  color: red;
  background-color: #222222;
  *background-color: #151515;
}

But still when I hover over the button I see the color change from red to white. Note that it's correctly picking up the fact it's disabled. I am using:

disabled="disabled"

in my button.

Upvotes: 4

Views: 3781

Answers (1)

Akshay
Akshay

Reputation: 14378

Try .btn:hover:not(:disabled),

A small example

Your example didn't work because you are using .btn:hover:not(disabled) you have to use a pseudo class to achieve what you need reference pseudo classes

button:hover:not(:disabled){
    color:red;
}
<button>Not disabled</button>
<button disabled>disabled</button>

Upvotes: 6

Related Questions