如何阻止覆盖文本遮挡背景图片的hover效果？

问题根源 #

你当前给img元素单独设置了:hover效果，当鼠标移到绝对定位的::after伪元素（"ADD TO CART"文本）上时，鼠标不在img元素范围内，因此img的亮度滤镜效果无法触发。

修改后的SCSS代码 #

.home__featured-element {
  width: 30%;
  height: 100%;
  position: relative;
  cursor: pointer;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.4s ease-in-out;
  }

  // 父元素hover时，给img应用亮度滤镜
  &:hover img {
    filter: brightness(70%);
  }

  &::after {
    content: "ADD TO CART";
    position: absolute;
    opacity: 0;
    color: white;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }

  &:hover::after {
    opacity: 1;
  }
}

关键调整说明 #

• 将img的hover逻辑转移到父元素.home__featured-element的hover状态下，只要鼠标在整个卡片区域内（包括伪元素、名称、价格文本），都会触发img的亮度变化。
• 把cursor: pointer移到父元素，确保整个卡片hover时都显示指针光标，统一交互体验。
• 给伪元素添加pointer-events: none，让鼠标事件穿透到父元素，避免文本区域干扰hover状态的触发。

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