將滑鼠懸停在嵌套 DIV 中的子元素上時如何防止父級懸停效應？

嵌套DIV：當子項懸停時禁用對父項的懸停效果

在此場景中，您有兩個嵌套DIV 元素，標記為“ .parent”和“.child”。將滑鼠懸停在“.parent”上時，您希望更改其背景顏色。但是，將滑鼠懸停在“.child”上時，您希望“.parent”恢復為預設的灰色背景。

父級和子級懸停效果的CSS 代碼：

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

問題：

問題：

上面的CSS 代碼成功地將所需的懸停效果應用於「.parent」和「.child」。但是，它沒有解決當“.child”懸停時禁用“.parent”懸停效果的要求。

使用同級元素的解決方案：

1. 事實證明，CSS 沒有提供直接的方法來透過巢狀元素來實現這種效果。但是，您可以使用同級元素來採用巧妙的解決方法。
3. 在「.parent」容器內加入類別為「.sibling」的新 DIV 同級元素。
4. 將「 .sibling」元素使用「top」和「left」CSS屬性覆寫「.child」元素。

為「.sibling」設定較高的「z-index」值，以確保它出現在「.sibling」上方。

在「.sibling」中加入與應用於「.parent」相同的背景顏色過渡效果。

<code class="css">.parent {
  ... (unchanged)
}

.child {
  ... (unchanged)
}

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

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

使用Sibling 元素更新了CSS：

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