why button set disabled but can still hover-CodePudding

I set disabled on the button, the button can still hover and the button can also active when clicking span element.The disabled attribute will prevent the user from interacting with the button, so why button can still hover and active?

<style>
  button:hover { border-color: red; color: red; }
  button:active { border-color: green; color: green; }
  button > span { background-color: #aaa; }
</style>
<button disabled>
  <span>click</span>
  <span>me</span>
</button>

CodePudding user response：

the hover is apply if button is enabled or disabled if you want to only apply style when button is enabled you can use the selector

button:hover:enabled

  button:hover:enabled { border-color: red; color: red; }
  button:active:enabled { border-color: green; color: green; }
  button > span { background-color: #aaa; }

<button disabled>
  <span>click</span>
  <span>me</span>
</button>

CodePudding user response：

According to W3Schools

A disabled button is unusable and un-clickable.

That's it, just because it's disabled doesn't mean it is un-hoverable.

CodePudding user response：

You could use this on the button:

pointer-events: none;

It will disable all events of the pointer for the element you use it on. Beware that sometimes on hover elements, you got to place it on the parent. Depends on how it's built.