如何僅使用 CSS 在懸停時顯示隱藏的 DIV？

用於在懸停時顯示隱藏DIV 的CSS 唯一解決方案

所提出的挑戰涉及一個包含三個最初隱藏的DIV 的選單，這些DIV 應該根據以下條件變得可見使用者的選單選擇僅使用CSS。這是為了確保即使在禁用 JavaScript 時也可存取。

僅 CSS 方法

要在沒有 JavaScript 的情況下實現此目的，「複選框駭客」就發揮了作用。此方法利用複選框輸入元素，並使用 :checked 偽選擇器根據其選取或未選取狀態指派樣式。可以透過將複選框與標籤關聯來隱藏該複選框。

範例程式碼

考慮以下範例程式碼：

在此範例中，當選取選項1 的複選框時，「content-1」DIV 將變得可見。同樣，選取選項 2 的核取方塊將顯示「content-2」DIV。

附加說明

關於客戶對滑動/淡入淡出效果的請求，這可以透過 JavaScript 實現。然而，對於僅 CSS 的解決方案來說，這是不可行的。或者，您可以考慮使用 CSS 轉換來創建微妙的淡入效果。

以上是如何僅使用 CSS 在懸停時顯示隱藏的 DIV？的詳細內容。更多資訊請關注PHP中文網其他相關文章！