如何使用 :hover 操作單獨類別的 CSS？

使用:hover 操作單獨類別的CSS

在CSS 中使用多個類別時，可能需要修改一個類別基於另一個元素的懸停狀態。雖然使用像 .item:hover .wrapper 這樣的巢狀選擇器似乎很直觀，但這並不是直接可行的。

但是，有兩種可行的方法可以實現此效果：

• 兄弟和子關係：如果目標元素（包裝器）是懸停元素（項目）的子元素或直接兄弟元素，則可以使用〜（兄弟）或（直接兄弟）選擇器。例如：

.item:hover + .wrapper {
  background-color: red;
}

• 後代關係： 如果目標元素是懸停元素的後代，您可以使用> .item:hover 規則中的（後代）選擇器。例如：

.item:hover > .child > .wrapper {
  color: black;
}

請記住，當目標元素是 HTML 結構中的同級元素或後代元素時，這些方法非常有效。對於 DOM 中不直接相關的元素，您可能需要考慮替代解決方案，例如 JavaScript。

以上是如何使用 :hover 操作單獨類別的 CSS？的詳細內容。更多資訊請關注PHP中文網其他相關文章！