CSS实现已悬停元素的二级hover效果：z-index不生效如何解决？

问题解答 #

你这个场景不需要使用z-index，你之前配置z-index不生效是因为遗漏了前提：z-index仅对position属性为relative/absolute/fixed/sticky的元素生效，默认的static定位下z-index不会生效，而且你的需求完全不需要调整堆叠层级就能实现。

正确的实现逻辑如下：

• 父组件Email的hover背景色修改直接绑定在父组件本身的选择器上即可，子元素的hover事件不会被父组件拦截
• 嵌套的<Image/>组件单独绑定独立的hover样式规则即可，两个hover效果可以共存：当鼠标悬浮在Image区域时，父组件的hover规则会触发（因为鼠标同时也悬浮在父组件范围内），Image的独立hover规则也会同时触发，刚好匹配你演示动图里的交互效果
• 如果你需要实现悬浮在Image上时父组件的hover效果不生效，可以用CSS的:has选择器限定父组件的hover触发条件：

  /* 仅当悬浮区域不在内部Image上时，才触发父组件的hover背景修改 */
  .email-wrapper:not(:has(img:hover)):hover {
    background-color: #efefef;
  }
  

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