如何使用純CSS關閉父元素懸停在其子元素上時的懸停效果？

子級懸停時父級懸停：純CSS 方法

在我們的HTML 結構中，我們有兩個嵌套的

;元素：.parent 作為外部容器，.child 作為內部元素。預設情況下，當滑鼠遊標懸停在 .parent 上時，其背景顏色會變成淺藍色。然而，我們的目標是當遊標懸停在 .child 上時，將 .parent 的背景恢復為其原始灰色。

不幸的是，CSS 選擇器目前缺乏根據子元素狀態設定父元素樣式的功能。為了規避這個限制，我們將採用一種巧妙的技術，使用額外的同級元素。

在我們的 CSS 中，我們定義 .parent 元素及其尺寸和填充以及灰色背景。當滑鼠懸停在 .parent 上時，其背景變為淺藍色。

關鍵部分是 .child 元素。我們使用負邊距（頂部：-200px；）將其放置在其父級之上一段距離，並為其提供深灰色背景，在懸停時過渡為黑色。

最後，我們介紹 .sibling 元素。這是一個佔位符元素，其位置和大小與 .child 匹配，但位於其左側和上方稍稍的位置。它還具有彩色背景，懸停時會轉換為白色。

當滑鼠遊標停留在 .child 上時，.child 元素會將其背景顏色轉換為黑色。同時，這會導致 .sibling 元素重疊並覆蓋先前懸停在 .parent 上的部分。因為 .sibling 是透明的，所以 .parent 原來的灰色背景再次可見。

因此，當您將滑鼠懸停在 .child 上時，它會變成黑色並隱藏 .parent 之前突出顯示的部分。這會產生一種錯覺，即 .parent 的背景已變回其原始顏色，儘管 .sibling 後面實際上仍然是灰色的。

儘管純 CSS 在這種情況下有局限性，但此技術提供了一種優雅且簡潔的效果。當您將滑鼠懸停在子元素上時關閉父元素上的懸停效果的有效解決方案。

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