如何在 CSS 中將滑鼠懸停在子級上時禁用對父級的懸停效果？-css教學-PHP中文網

如何在 CSS 中將滑鼠懸停在子級上時禁用對父級的懸停效果？

DDD

發布： 2024-11-03 20:12:29

原創

394 人瀏覽過

How to Disable Hover Effect on Parent When Hovering Over Child in CSS?

對子級的懸停效果禁用對父級的懸停效果

問題：

您有兩個嵌套的

元素，並且您希望將滑鼠懸停在父元素.parent 上時更改其背景。然而，當你將滑鼠懸停在子元素 .child 上時，你希望父元素的背景恢復到原來的狀態。

解：

使用純 CSS，以前是不可能的直接達到這個效果。然而，隨著最近在2024 年引入:has 選擇器，現在可以解決這個問題：

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

/* The solution using the :has selector */
.parent:has(.child:hover) {
  background: lightgray;
}</code>

登入後複製

透過定位具有懸停子元素的父元素，我們可以有效地停用懸停當子元素懸停時對父元素的影響。

之前的有限解決方案（2024 年之前）：

在引入:has 選擇器之前，解決方法是使用同級元素實現類似的效果：

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

.child {
  height: 100px;
  width: 100px;
  background: #355E95;
  transition: background-color 1s;
  position: relative;
  top: -200px;
}

.child:hover {
  background: #000;
}

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

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

登入後複製

這種方法涉及創建一個位於子元素頂部的同級元素。當孩子懸停時，兄弟姊妹的背景顏色會發生變化，有效隱藏父母的背景。

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