如何仅用CSS实现子元素hover时父元素边框色匹配子元素背景色

给定HTML结构 #

<div class="parent">     
    <div class="child1" style="background: red;"></div>     
    <div class="child2" style="background: blue;"></div>  
</div> 

需求说明 #

当鼠标悬停在.child1上时，.parent元素的边框颜色变为红色；当悬停在.child2上时，.parent的边框颜色变为蓝色，要求仅使用CSS实现。

之前得到的无效代码 #

.parent:hover {
  border-color: red;
}

.child1:hover ~ .parent {
  border-color: blue;
}

.child2:hover ~ .parent {
  border-color: green;
}

解答 #

可行，利用CSS的:has()伪类即可实现（现代主流浏览器已支持该特性）。

正确代码示例 #

/* 给父元素设置基础边框样式 */
.parent {
  border: 2px solid #ccc;
  padding: 20px;
  width: fit-content;
}

/* 子元素hover时修改父元素边框 */
.parent:has(.child1:hover) {
  border-color: red;
}

.parent:has(.child2:hover) {
  border-color: blue;
}

/* 给子元素设置宽高，方便测试hover效果 */
.child1, .child2 {
  width: 100px;
  height: 100px;
  margin: 10px;
}

代码说明 #

• 之前的无效代码错误在于使用了~兄弟选择器，但.parent是.child1、.child2的父元素，并非兄弟元素，选择器无法命中目标。
• :has()伪类可以检测父元素内部是否存在满足条件的子元素，通过.parent:has(.child1:hover)这类写法，就能实现“子元素被hover时，给父元素应用对应样式”的逻辑，完全匹配需求。

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