如何使伪元素悬停时不出现悬停效果答案

【问题标题】：How to make hover effect not appear when pseudo-element is hovered on如何使伪元素悬停时不出现悬停效果
【发布时间】：2022-09-30 15:49:57
【问题描述】：

我想要悬停效果（伪元素的背景变为绿色）只要当按钮悬停时出现，但是当伪元素（绿色框）悬停时也会出现。

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>

标签： html css

【解决方案1】：

您可以通过首先将display 属性设置为display: none; 将伪元素的默认状态设置为隐藏来实现这一点。
在button 元素的悬停事件中，您可以通过将display 属性更新为display: block; 使其可见但是，如果您将鼠标从button 元素上松开，它将再次被隐藏。
希望这不是某种下拉菜单，如果是这样，这不是你应该这样做的方式。

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>

【讨论】：

【解决方案2】：

@nad 通过添加 pointer-events: none; 您可以阻止所有单击和光标事件。

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>

【讨论】：

这似乎是一个更好的答案。感谢更新。