Wie kann ich versteckte DIVs beim Hover nur mit CSS anzeigen?

Nur ​​CSS-Lösung zum Anzeigen versteckter DIVs beim Hover

Die vorgestellte Herausforderung beinhaltet ein Menü mit drei zunächst versteckten DIVs, die basierend auf sichtbar werden sollen die Menüauswahl des Benutzers allein mit CSS. Dadurch soll die Barrierefreiheit auch bei deaktiviertem JavaScript gewährleistet werden.

CSS Only Approach

Um dies ohne JavaScript zu erreichen, kommt der „Checkbox-Hack“ ins Spiel. Diese Methode verwendet ein Kontrollkästchen-Eingabeelement mit Stilen, die basierend auf seinem aktivierten oder nicht aktivierten Status mithilfe des Pseudoselektors :checked zugewiesen werden. Das Kontrollkästchen kann ausgeblendet werden, indem es mit einer Beschriftung verknüpft wird.

Beispielcode

Betrachten Sie den folgenden Beispielcode:

<input type="checkbox">

input[type="checkbox"]:checked + div {
  display: block;
}

Wenn in diesem Beispiel das Kontrollkästchen für Option 1 aktiviert ist, wird das DIV „content-1“ sichtbar. Ebenso wird durch Aktivieren des Kontrollkästchens für Option 2 der DIV „Inhalt-2“ angezeigt.

Zusätzliche Klarstellung

Bezüglich der Anfrage des Kunden nach einem Gleit-/Fading-Effekt: Dies ist mit JavaScript erreichbar. Für eine reine CSS-Lösung ist dies jedoch nicht machbar. Alternativ können Sie CSS-Übergänge verwenden, um einen subtilen Einblendeffekt zu erzielen.

Das obige ist der detaillierte Inhalt vonWie kann ich versteckte DIVs beim Hover nur mit CSS anzeigen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!