하위 요소 위로 마우스를 가져갈 때 상위 호버 효과를 일시 중단하는 방법은 무엇입니까?

<code class="css">.parent {
  width: 100px;
  height: 100px;
  padding: 50px;
  background: lightgray;
}

.parent:hover {
  background: lightblue;
}

.child {
  height: 100px;
  width: 100px;
  background: darkgray;
}

.child:hover {
  background: lightblue;
}

.sibling {
  position: relative;
  width: 100px;
  height: 100px;
  padding: 50px;
  top: -50px;
  left: -50px;
  background: #3D6AA2;
  transition: background-color 1s;
}

.sibling:hover {
  background: #FFF;
}</code>

<code class="html"><div class="parent">
    <div class="sibling"></div>
    <div class="child"></div>
</div></code>

<code class="css">.parent:has(.child:hover) {
  background: lightgray !important;
}</code>