当悬停在子元素上时，如何将父元素的边框颜色设置为与子元素的颜色相同，

Question

这是html的结构

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

我想制作

border-color

的

.parent

元素red当我

hover

超过

.child1

和blue当我

hover

超过

.child2

仅使用 CSS。

这可能吗

---

我是网络新手，所以我在 chatGPT 上提问。它会产生一些无效的垃圾代码。

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

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

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

Answer 1

终于得到我的答案

:has()

解决了我的问题。 这是

css

代码

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

这是我正在处理的页面。

代码笔：https://codepen.io/manoj1310/pen/WNaxRqa