首頁 > web前端 > css教學 > 如何僅使用 CSS 在懸停時顯示隱藏的 DIV?

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

Mary-Kate Olsen
發布: 2024-11-22 08:23:15
原創
354 人瀏覽過

How Can I Show Hidden DIVs on Hover Using Only CSS?

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

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

僅 CSS 方法

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

範例程式碼

考慮以下範例程式碼:

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

附加說明

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

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

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板