Maison > interface Web > tutoriel CSS > le corps du texte

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

Patricia Arquette
Libérer: 2024-10-30 01:50:29
original
601 Les gens l'ont consulté

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>
Copier après la connexion

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>
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!