Comment empêcher le masquage de contenu involontaire dans CSS : une solution au problème \":focus\"

Masquer/afficher la liste de contenu avec CSS : résoudre les comportements involontaires

À la recherche d'une solution pour masquer et afficher le contenu en utilisant uniquement CSS, un développeur a rencontré un problème : le contenu pouvait être masqué en cliquant n'importe où sur la page, plutôt qu'en cliquant simplement sur le lien "masquer" désigné.

Le code initial du développeur utilisait le CSS suivant :

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

Ce code masque avec succès le contenu lorsque vous cliquez sur le lien « Masquer ». Cependant, il permet également de se masquer en cliquant sur n'importe quelle partie de la page, car la règle CSS cible la pseudo-classe ":focus".

Pour résoudre ce problème, nous pouvons utiliser le CSS mis à jour suivant :

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

Dans ce code mis à jour, nous utilisons le combinateur "~" pour cibler les éléments frères et sœurs de l'élément ciblé. Cela signifie que l'élément "hide" (~ .alert) n'est masqué que lorsque l'élément "show" est actif.

Le HTML reste le même :

<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 cette version révisée approche, le contenu n'est désormais masqué que lorsque l'on clique sur l'élément "Cacher moi", comme le voulait le développeur.

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!