How to make hover effect not appear when pseudo-element is hovered on

September 30, 2022

I want the hover effect (background change of pseudo-element to green) to only appear when the button is being hovered, however it also appears when the pseudo-element (green box) is hovered on.

button {
    box-sizing: border-box;

  background-color: blue;
  padding: 10px 20px;
  color: white;
  position: relative;
}

button::before {
  content: '';
  position: absolute;
  background-color: transparent;
  height: 20px;
  width: 100%;
  left: 0;
  bottom: -30px;
}

button:hover::before {
  background-color: green;
}

<button>
I am a button
</button>

>Solution :

@nad by adding pointer-events: none; you can prevents all click and cursor events.

button {
    box-sizing: border-box;

  background-color: blue;
  padding: 10px 20px;
  color: white;
  position: relative;
}

button::before {
  content: '';
  position: absolute;
  background-color: transparent;
  height: 20px;
  width: 100%;
  left: 0;
  bottom: -30px;
  pointer-events: none;
}

button:hover::before {
  background-color: green;
}