CSS :has() 实现父元素悬停效果排除特定子元素

结合 :not() 实现排除逻辑

为了实现“当子元素被悬停时不触发父元素悬停效果”，我们可以这样构建选择器：

.parent:not(:has(.child:hover)):hover {
  color: orange;
}

让我们分解这个选择器：

1. .parent: 首先选择所有的 .parent 元素。
2. :not(...): 这是一个否定伪类，它会排除那些满足括号内条件的元素。
3. :has(.child:hover): 这是 :not() 内部的条件。它检查 .parent 元素是否“拥有一个正在被悬停的 .child 元素”。
4. :hover: 最后，将悬停效果应用到那些既是 .parent 元素，又没有一个正在被悬停的 .child 元素的元素上。

用通俗的语言来说，这个选择器表达的是：“选择所有 .parent 元素，但排除那些内部有 .child 元素正在被悬停的 .parent 元素，然后，对这些被选中的 .parent 元素应用悬停效果。”

完整示例代码

下面是使用 :has() 解决该问题的完整HTML和CSS代码：

  Title
  
    +
  

/* 父元素基础样式 */
.parent {
  display: block;
  text-align: center;
  font-weight: 700;
  font-size: 31px;
  letter-spacing: normal;
  position: relative;
  transition: color 0.3s ease; /* 添加过渡效果，使颜色变化更平滑 */
}

/* 关键样式：当父元素被悬停，但其子元素 .child 没有被悬停时，改变父元素颜色 */
.parent:not(:has(.child:hover)):hover {
  color: orange;
}

/* 子元素 .child 的基础样式 */
span.child {
  line-height: unset;
  vertical-align: baseline;
  top: 0;
  left: 0;
  position: absolute;
  color: transparent; /* 默认不可见 */
  box-shadow: none;
  z-index: 5;
}

/* 子元素 .child 内部 button 的样式 */
span.child button {
  position: absolute;
  left: 0;
  top: -20px; /* 调整位置，使其在 Title 上方 */
  color: #fff;
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  z-index: 5;
  background: #0085ba !important; /* 蓝色背景 */
  border-radius: 50%;
  border: 2px solid #fff;
  box-sizing: border-box;
  padding: 3px;
  display: inline-block;
  overflow: hidden;
  cursor: pointer; /* 鼠标悬停时显示手型光标 */
  transition: background 0.2s ease; /* 添加过渡效果 */
}

/* button 自身的悬停效果 */
span.child button:hover {
  background: #006bb3 !important; /* 悬停时颜色变深 */
}

通过上述代码，当鼠标悬停在 Title 文本区域时，Title 的颜色会变为橙色。但当鼠标移动到 + 按钮上时，Title 的颜色会恢复到默认状态（或保持不变），而 + 按钮会显示其自身的悬停效果。

注意事项与兼容性

• 浏览器兼容性： :has() 伪类是一个相对较新的CSS特性。在撰写本文时，主流现代浏览器（如Chrome, Firefox, Safari, Edge）的最新版本已普遍支持 :has()。但在生产环境中使用前，务必检查目标用户群体的浏览器兼容性，或提供降级方案。
• 性能考量： 尽管 :has() 功能强大，但复杂 :has() 选择器的解析可能会比简单选择器消耗更多的浏览器资源。在大多数常见用例中，这种性能差异微乎其微，但在大型或复杂的应用中，仍需留意。
• 语义化与结构： 虽然 :has() 提供了灵活的解决方案，但在某些情况下，重新审视HTML结构或使用JavaScript来处理复杂的交互逻辑可能更为恰当，尤其是在 :has() 不兼容或性能成为瓶颈时。然而，对于本文讨论的场景，:has() 提供了一个纯CSS的优雅解决方案。

总结

CSS :has() 伪类极大地增强了CSS选择器的能力，使其能够实现以前只能通过JavaScript或复杂HTML结构才能达成的交互效果。通过巧妙地结合 :not() 和 :has()，我们可以精确控制父元素在特定子元素状态下的样式表现，例如在子元素被悬停时不触发父元素的悬停效果。掌握 :has() 的使用，将使开发者能够构建更精细、更具响应性的用户界面。