如何为含:before/:after伪元素的箭头实现全局hover效果？

嘿，我明白你的问题了——你想让整个箭头（主div、:before和:after伪元素）只要鼠标碰到任意一部分，就全部触发hover效果，而不是只有悬停在:after上才生效对吧？

问题的核心其实在于伪元素的鼠标事件归属和主元素的触发范围：

• 默认情况下，伪元素依附于主元素，但如果伪元素的位置超出了主元素的宽高范围，鼠标悬停在那些超出部分时，主元素不会检测到hover状态；
• 如果你之前只给:after:hover写了样式，那自然只有悬停在:after上才会触发，而非整个组件。

给你两个关键的解决思路，结合起来就能搞定：

1. 用主元素的Hover状态统一控制所有元素 #

不要单独给伪元素加hover，而是通过主div的hover状态来同步控制主元素、:before和:after的样式。这样只要主元素触发hover，所有关联元素都会同步变化。

示例代码：

/* 主箭头容器 */
.arrow-container {
  position: relative;
  /* 确保容器尺寸覆盖伪元素区域，或通过padding扩展触发范围 */
  width: 120px;
  height: 40px;
  padding: 8px;
  box-sizing: border-box;
  transition: all 0.3s ease;
}

/* 伪元素基础样式 */
.arrow-container:before,
.arrow-container:after {
  content: "";
  position: absolute;
  background-color: #2d2d2d;
  transition: all 0.3s ease;
  /* 关键：让伪元素不拦截鼠标事件，传递给主容器 */
  pointer-events: none;
}

/* 主容器hover时，同步改变所有元素的样式 */
.arrow-container:hover {
  background-color: #f5f5f5;
}

.arrow-container:hover:before {
  background-color: #ff4444;
  transform: translateX(4px);
}

.arrow-container:hover:after {
  background-color: #ff4444;
  transform: rotate(45deg) translateX(2px);
}

2. 用pointer-events: none让鼠标事件穿透伪元素 #

给伪元素加上pointer-events: none后，鼠标悬停在伪元素上时，事件会直接传递给它的父元素（主div），这样不管你碰的是主div还是它的伪元素，都会触发主div的hover状态，进而带动所有元素的样式变化。

另外，如果你的伪元素超出了主div的范围，记得要么调整主div的宽高/内边距来覆盖这些区域，要么就用上面的pointer-events属性，两者选其一或结合使用都可以。

这样调整后，整个箭头组件的任何部分被hover，所有元素都会同步触发hover效果啦～

内容的提问来源于stack exchange，提问作者SporeDev