使用CSS 實現多個元素的懸停效果
當面臨同時將懸停效果應用於多個元素的挑戰時,傳統觀點可能會建議使用JavaScript作為解決方案。令人驚訝的是,僅 CSS 就可以有效地解決這個問題。
讓我們考慮一個 HTML 結構,其中兩個元素(圖像和圖層)每個元素的正常狀態和懸停狀態都有不同顏色的邊框。要創建所需的行為,將滑鼠懸停在任何元素上都會啟動兩個元素的懸停邊框顏色,請按照以下步驟操作:
定義基本樣式:
對.section 元素套用懸停效果:
對.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中文網其他相關文章!