如何让伪元素悬停时不出现hover效果

Question

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>

Answer 1

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>

Answer 2

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