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

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>

CodePudding user response：

@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;
}

<button>
I am a button
</button>

CodePudding user response：

You can achieve that by first setting the default state of the pseudo-element to hidden by setting the display property to display: none;.
On the hover event of the button element you can make it visible by updating the display property to display: block; But if you loose mouse over from the button element it will be hidden again.
Hope this is not for some kind of drop-down menu, if so, this is not how you should go about doing it.

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;
  display: none;
}

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

<button>
I am a button
</button>