如何同時對多個 CSS 元素套用懸停效果？

在CSS 中跨多個元素應用懸停效果

將滑鼠懸停在特定元素上時，您可能希望將效果應用於多個相關元素。例如，您有兩個相鄰的元素“圖像”和“圖層”，每個元素都有單獨的邊框。如何才能使滑鼠懸停在一個元素上影響兩個元素的邊框顏色？

不使用JavaScript 的解決方案

要在不使用JavaScript 的情況下實現此目的，您可以使用CSS像這樣：

.section {
  background: #ccc;
}

.layer {
  background: #ddd;
}

.section:hover img {
  border: 2px solid #333;
}

.section:hover .layer {
  border: 2px solid #F90;
}

在此範例中，當您將滑鼠懸停在「.section」元素上時，其中的「img」將有一個2像素實線邊框，顏色為#333。同時，「.section」內的「.layer」元素也會收到一個 2px 實線邊框，顏色為#F90。當您將滑鼠懸停在“.layer”元素上時，會發生相同的行為。

以上是如何同時對多個 CSS 元素套用懸停效果？的詳細內容。更多資訊請關注PHP中文網其他相關文章！