用於在懸停時顯示隱藏DIV 的CSS 唯一解決方案
所提出的挑戰涉及一個包含三個最初隱藏的DIV 的選單,這些DIV 應該根據以下條件變得可見使用者的選單選擇僅使用CSS。這是為了確保即使在禁用 JavaScript 時也可存取。
僅 CSS 方法
要在沒有 JavaScript 的情況下實現此目的,「複選框駭客」就發揮了作用。此方法利用複選框輸入元素,並使用 :checked 偽選擇器根據其選取或未選取狀態指派樣式。可以透過將複選框與標籤關聯來隱藏該複選框。
範例程式碼
考慮以下範例程式碼:
在此範例中,當選取選項1 的複選框時,「content-1」DIV 將變得可見。同樣,選取選項 2 的核取方塊將顯示「content-2」DIV。
附加說明
關於客戶對滑動/淡入淡出效果的請求,這可以透過 JavaScript 實現。然而,對於僅 CSS 的解決方案來說,這是不可行的。或者,您可以考慮使用 CSS 轉換來創建微妙的淡入效果。
以上是如何僅使用 CSS 在懸停時顯示隱藏的 DIV?的詳細內容。更多資訊請關注PHP中文網其他相關文章!