Comment masquer/afficher du contenu avec CSS uniquement et éviter un masquage accidentel ?

Masquer/afficher la liste de contenu avec CSS uniquement

Problème :

Comment masquer /afficher le contenu en utilisant uniquement CSS sans JavaScript, tout en garantissant que le contenu n'est masqué qu'en cliquant sur le bouton "Masquer" et non en cliquant n'importe où sur la page.

Solution initiale :

Le code HTML et CSS fourni permet de masquer et d'afficher le contenu, mais le contenu peut être masqué en cliquant n'importe où sur la page.

Solution :

Pour résolvez ce problème, utilisez le CSS modifié suivant :

<code class="css">body {
  display: block;
}

.span3:focus ~ .alert {
  display: none;
}

.span2:focus ~ .alert {
  display: block;
}

.alert {
  display: none;
}</code>

Et mettez à jour la structure HTML en conséquence :

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

Comment ça marche :

Cette solution utilise le sélecteur ~ (frère) en CSS pour cibler les éléments frères et sœurs de l'élément ciblé. Lorsque le bouton « Cacher moi » est activé, il définit l'élément .alert adjacent pour qu'il affiche : aucun ;, masquant ainsi le contenu. À l'inverse, lorsque le bouton « Montrez-moi » est activé, il définit l'élément .alert adjacent pour qu'il affiche : block ;, affichant le contenu.

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!