Comment puis-je masquer et afficher du contenu avec CSS sans JavaScript ?

Masquer et afficher du contenu avec CSS : une astuce sans JavaScript

Lorsque vous travaillez avec le développement Web, contrôler la visibilité du contenu est souvent essentiel. Traditionnellement, cela est réalisé à l'aide de JavaScript, mais CSS peut également être utilisé pour créer des effets de masquage et d'affichage élégants. Une de ces techniques est décrite ci-dessous, abordant un défi spécifique rencontré avec les approches précédentes.

Masquer/Afficher le basculement de contenu :

On peut utiliser CSS pour créer un basculement de contenu qui permet aux utilisateurs de masquer et d'afficher une liste d'éléments. L'extrait suivant illustre cette fonctionnalité :

<code class="css">#cont {
  display: none;
}
.show:focus + .hide {
  display: inline;
}
.show:focus + .hide + #cont {
  display: block;
}</code>

Le défi :

Bien que le CSS ci-dessus obtienne l'effet souhaité, il se heurte à un inconvénient. Lorsque le contenu est affiché, il peut être masqué en cliquant simplement n'importe où sur la page. Ce comportement n'est pas souhaitable, car nous souhaitons que le contenu soit masqué uniquement lorsque vous cliquez sur le lien « Masquer ».

Solution :

Pour résoudre ce problème, les éléments suivants Le code CSS et HTML révisé peut être utilisé :

CSS :

<code class="css">body {
  display: block;
}
.span3:focus ~ .alert {
  display: none;
}
.span2:focus ~ .alert {
  display: block;
}
.alert {
  display: none;
}</code>

HTML :

<code class="html"><span class="span3">Hide Me</span>
<span class="span2">Show Me</span>
<p class="alert">Some alarming information here</p></code>

Avec Ces changements, le message d'alerte ne sera masqué que lorsque l'on cliquera sur l'élément span "Hide Me". Cette solution résout efficacement le problème et fournit une méthode basée sur CSS pour masquer et afficher le contenu sans recourir à JavaScript.

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!