將滑鼠懸停在子元素上時如何暫停父元素懸停效果？

懸停在子元素上並暫停父元素懸停效果

當嵌套

時元素共存時，將滑鼠懸停在子元素上可能會幹擾應用於父元素的懸停效果。相反，您可能希望在將滑鼠懸停在子元素上時停用父元素上的懸停效果。

CSS 解決方案

在不使用 JavaScript 的情況下實現此行為需要巧妙的解決方法使用兄弟元素。

<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>

兄弟元素技巧

兄弟元素絕對定位在父元素內，並與父元素和子元素重疊元素。它超出了父元素的範圍，可以有效捕捉所有不專門針對子元素的懸停事件。

當兄弟元素懸停時，其背景顏色變為白色，從而在視覺上消除父元素的懸停效果。當子元素懸停時，其本身的懸停效果仍然存在，但白色同級元素隱藏了父元素的懸停效果。

近期進展

請注意 :has( ) 選擇器現在存在，可以根據特定後代的存在直接定位父元素。這種方法可以用來更優雅地實現所需的行為。

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

以上是將滑鼠懸停在子元素上時如何暫停父元素懸停效果？的詳細內容。更多資訊請關注PHP中文網其他相關文章！