CSS能否区分实际悬停与继承悬停？如何仅响应元素自身悬停

明确一点：没有原生CSS选择器能直接区分“鼠标悬停在元素自身区域”还是“悬停在子元素上”——因为:hover伪类基于DOM事件冒泡机制，只要鼠标落在元素或其子元素范围内，父元素的:hover就会被激活。但我们可以通过添加裁剪遮罩的方式，在保留嵌套关系的前提下实现需求。

核心思路 #

在红色方块（.red）内部添加一个裁剪后的透明遮罩元素，仅覆盖.red中未被蓝色方块（.blue）占据的区域。将.red的hover样式绑定到这个遮罩元素的hover状态上，同时让蓝色方块保持正常交互能力：

• 鼠标悬停在.red的空白区域时，遮罩元素触发hover，带动.red变色
• 鼠标悬停在.blue上时，直接触发.blue的hover，遮罩元素因被裁剪不响应，.red不会变色

修改后的代码实现 #

CSS 部分 #

:root {
  --line: 1px;
  --side: 1vmin;
  --size: max(min(100vh, 50vw), min(50vh, 100vw));
  --font: calc(var(--size) / 20);
  --rect: calc(var(--size) * 0.666 - var(--line));
  --drop: calc(var(--rect) * 0.5);
  --edge: calc(var(--drop) - var(--side));
  --red:  #9009;
  --blue: #0099;
  --bg:   #040;
}

body {
  margin: 0;
  height: 100vh;
  color: #ddd;
  background-color: #222;
  font-size: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

div {
  position: relative;
  box-sizing: border-box;
}

div[id] {
  font-size: var(--font);
  display: inline-block;
  width: var(--size);
  height: var(--size);
  border: var(--line) solid #ddd;

  p {
    position: absolute;
    pointer-events: none;
    z-index: 1;

    span {
      display: block;
      width: var(--rect);
      margin-top: 0.5em;
      font-size: 0.7em;
    }
  }

  div.red,
  div.blue {
    width: var(--rect);
    height: var(--rect);
    border: var(--side) solid red;
  }

  div.blue {
    border-color: blue;
    position: relative;
    z-index: 2; /* 确保蓝色方块在遮罩层上方 */
    &:hover {
      background-color: var(--blue);
    }
  }

  &#two {
    background-color: var(--bg);
    
    .red {
      /* 添加裁剪遮罩层 */
      &::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
        /* 裁剪掉蓝色方块所在的矩形区域 */
        clip-path: polygon(
          0 0, 
          0 100%, 
          var(--edge) 100%, 
          var(--edge) var(--edge), 
          calc(var(--edge) + var(--rect)) var(--edge), 
          calc(var(--edge) + var(--rect)) calc(var(--edge) + var(--rect)), 
          var(--edge) calc(var(--edge) + var(--rect)), 
          var(--edge) 100%, 
          100% 100%, 
          100% 0
        );
      }
      /* 监听遮罩层hover，同步修改red样式 */
      &:has(::before:hover) {
        background-color: var(--red);
      }
    }
    
    .blue {
      top: var(--edge);
      left: var(--edge);
    }
  }

  &#three {
   .blue {
      position: absolute;
      top: var(--drop);
      left: var(--drop);
    }

      .overlap {
        position: absolute;
        top: var(--drop);
        left: var(--drop);
        width: var(--drop);
        height: var(--drop);
        border-color: transparent;
      }
  }
}

#three:has(.overlap:hover) {
  .red {
    background-color: var(--red);
  }
  .blue {
    background-color: var(--blue);
  }
}

HTML 部分（保持原嵌套结构，无需修改） #

<div id="two">
  <p>Two nested divs
    <span>Roll over the red square (excluding blue area) to highlight it</span>
    <span>Rolling over the blue square only highlights itself now</span>
  </p>
  <div class="red">
    <div class="blue"></div>
  </div>
</div>
<div id="three">
  <p>Three overlapping divs<span>Roll over either square to highlight it</span><span>Roll over the intersection to highlight both squares</span></p>
  <div class="red"></div>
  <div class="blue"></div>
  <div class="overlap"></div>
</div>

关键细节说明 #

1. clip-path 裁剪规则：通过多边形坐标精准剪掉.blue占据的矩形区域，确保遮罩层仅覆盖.red的空白部分
2. z-index 层级控制：让.blue的层级高于遮罩层，保证蓝色方块能正常响应自身的hover事件
3. :has() 选择器：利用:has(::before:hover)监听遮罩层的hover状态，进而控制.red的样式（目前已被所有现代浏览器支持）

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