單獨 CSS 可以同時處理多個元素的懸停效果嗎？

使用CSS 實現多個元素的懸停效果

當面臨同時將懸停效果應用於多個元素的挑戰時，傳統觀點可能會建議使用JavaScript作為解決方案。令人驚訝的是，僅 CSS 就可以有效地解決這個問題。

讓我們考慮一個 HTML 結構，其中兩個元素（圖像和圖層）每個元素的正常狀態和懸停狀態都有不同顏色的邊框。要創建所需的行為，將滑鼠懸停在任何元素上都會啟動兩個元素的懸停邊框顏色，請按照以下步驟操作：

1. 定義基本樣式：

   • 使用CSS設定.section和.layer的背景顏色

2. 對.section 元素套用懸停效果：

   • 當遊標停留在.section上時，更新內部影像的邊框樣式

3. 對.layer 元素套用懸停效果：

   • 同樣，當懸停在.layer上時，修改圖層的邊框樣式

以下是範例程式碼：

/* Define base styles */
.section {
  background: #ccc;
}
.layer {
  background: #ddd;
}

/* Hover effects on .section */
.section:hover img {
  border: 2px solid #333;
}

/* Hover effects on .layer */
.section:hover .layer {
  border: 2px solid #F90;
}

此CSS 確保滑鼠停留在影像或圖層上都會啟動兩者的懸停邊框顏色元素。這就是全部，不需要 JavaScript！

以上是單獨 CSS 可以同時處理多個元素的懸停效果嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！