如果使用CSS悬停，如何使我的禁用按钮不会改变颜色？

Question

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.

Answer 1

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>