Maison  >  Article  >  interface Web  >  Comment masquer/afficher du contenu avec CSS uniquement et éviter un masquage accidentel ?

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

Patricia Arquette
Patricia Arquetteoriginal
2024-10-30 01:50:29580parcourir

How to Hide/Show Content with CSS Only and Prevent Accidental Hiding?

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn