如何僅使用 CSS 在點擊時切換多個 div 可見性？

使用CSS 控制點擊時的Div 可見性

問題：

用戶希望切換多個div 的可見性點擊僅使用CSS，無需使用即可存取JavaScript.

解決方案：

使用「複選框駭客」：

1. 建立一個隱藏複選框：定義;元素並使用CSS 將其顯示設為無。
2. 將點選事件與複選框關聯：點選選單選項時，切換複選框的選取屬性。
3. 根據複選框狀態設定 div 樣式： 使用 CSS 中的 :checked 偽選擇器根據是否選取來對 div 套用不同的樣式複選框是否被選取。這會影響它們的可見性、褪色或滑動行為。

代碼示例：

<input type="checkbox">

#myCheckbox:checked ~ #myDiv {
  display: block;
  animation: slide-in 0.5s ease-in-out;
}

@keyframes slide-in {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

優點：

• 輔助功能：無需啟用JavaScript 即可運作。
• 控制：調整CSS動畫來自訂投影片/淡入淡出行為。
• 簡單性：需要最少的 CSS 程式碼，無需 JavaScript。

以上是如何僅使用 CSS 在點擊時切換多個 div 可見性？的詳細內容。更多資訊請關注PHP中文網其他相關文章！