如何在PanelOverlay设置pointer-events:none时触发hover效果？

核心思路是利用父元素的hover事件控制PanelOverlay的样式——因为pointer-events: none的元素无法触发自身hover，但父元素可以接收鼠标事件，通过后代选择器就能修改子元素样式，同时保留点击穿透特性。

修改后的代码 #

CSS 部分 #

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  color: black;
}

main {
  position: relative;
  display: flex;
  width: 64px;
}
.IconContainer {
  background-color: white;
  color: orange;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 64px;
  height: 64px;
}

.IconContainer.OnActive:hover span {
  color: black;
  transition: 1s;
}

.PanelOverlay {
  pointer-events: none;
  z-index: 1000;
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  background-color: rgba(0, 0, 0, 0.3);
  transition: 1s; /* 将过渡效果移至默认样式，确保移入移出都有平滑动画 */
}

/* 通过父元素hover触发PanelOverlay的高亮样式 */
main:hover .PanelOverlay {
  z-index: 20000;
  background-color: rgba(255, 255, 255, 0.3); /* 替换为需求的悬停提示色 */
}

HTML 部分（无需修改） #

<main style="position: relative; display: flex; width: 64px">
  <div class="IconContainer OnActive">
    <span class="material-icons-outlined">home</span>
  </div>
  <div class="PanelOverlay"></div>
</main>

原理说明 #

• PanelOverlay保留pointer-events: none，确保点击能穿透到下方的IconContainer元素
• 鼠标悬停父元素main时，通过main:hover .PanelOverlay选择器修改悬浮层的背景色，实现高亮提示
• 过渡动画移至PanelOverlay默认样式，保证鼠标移入移出过程都有平滑的视觉变化

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