有没有办法阻止我的:active按钮在::before/::after上显示父级悬停效果？

在CSS中，可以使用pointer-events属性来阻止子元素的:active状态触发父元素的悬停效果。pointer-events属性可以设置为none，表示子元素不响应鼠标事件。这样，当点击子元素时，父元素的悬停效果就不会触发。

以下是一个示例代码：

HTML:

<div class="parent">
  <div class="child"></div>
</div>

CSS:

.parent {
  width: 200px;
  height: 200px;
  background-color: #ccc;
}

.child {
  width: 100px;
  height: 100px;
  background-color: #f00;
}

.child::before {
  content: "";
  display: block;
  width: 50px;
  height: 50px;
  background-color: #00f;
}

.parent:hover {
  background-color: #f00;
}

.parent:hover .child::before {
  background-color: #0f0;
}

.child::before {
  pointer-events: none;
}

在上述代码中，当鼠标悬停在父元素上时，父元素的背景色会变为红色。同时，子元素的::before伪元素的背景色也会变为绿色。但是，当点击子元素时，父元素的悬停效果不会触发，子元素的::before伪元素的背景色保持为蓝色。

腾讯云相关产品和产品介绍链接地址：