Comment puis-je afficher les DIV masqués au survol en utilisant uniquement CSS ?

Solution CSS uniquement pour afficher les DIV masquées au survol

Le défi présenté implique un menu avec trois DIV initialement masquées qui devraient devenir visibles en fonction de la sélection de menu de l'utilisateur en utilisant uniquement CSS. Ceci permet de garantir l'accessibilité même lorsque JavaScript est désactivé.

Approche CSS uniquement

Pour y parvenir sans JavaScript, le "checkbox hack" entre en jeu. Cette méthode utilise un élément d'entrée de case à cocher avec des styles attribués en fonction de son état coché ou non à l'aide du pseudo-sélecteur :checked. La case à cocher peut être masquée en l'associant à une étiquette.

Exemple de code

Considérez l'exemple de code suivant :

<input type="checkbox">

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

Dans cet exemple, lorsque la case de l'option 1 est cochée, le DIV "content-1" deviendra visible. De même, cocher la case de l'option 2 révélera le DIV "content-2".

Clarification supplémentaire

Concernant la demande du client pour un effet de glissement/fondu, ceci est réalisable avec JavaScript. Cependant, pour une solution CSS uniquement, cela n’est pas réalisable. Vous pouvez également envisager d'utiliser des transitions CSS pour créer un subtil effet de fondu.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!