Comment masquer et afficher des éléments en CSS

Dans le développement Web, il est souvent nécessaire de masquer ou d'afficher certains éléments, tels que les menus, les boîtes de dialogue, etc. Bien que JavaScript puisse réaliser cette fonction, nous ne souhaitons parfois pas introduire trop de scripts ou limiter la compatibilité des navigateurs. La technique CSS cliquer pour afficher-masquer peut être utilisée pour masquer et afficher des éléments à l'aide de CSS sans utiliser JavaScript.

Comment utiliser la technique CSS cliquer pour afficher-masquer ?

Tout d'abord, définissez l'élément à masquer pour afficher : aucun ;, par exemple :

  <div id="myDiv" style="display: none;">
    这是被隐藏的元素。
  </div>

Deuxièmement, ajoutez un déclencheur, tel qu'un bouton ou un lien, afin que lorsque l'utilisateur clique, l'élément masqué soit affiché. Pour obtenir cet effet, vous devez utiliser la pseudo-classe :checked et le sélecteur ~ sibling en CSS.

  <input type="checkbox" id="toggle" />
  <label for="toggle">点我显示</label>

  <div id="myDiv">
    这是被隐藏的元素。
  </div>

  <style>
    #toggle {
      display: none;
    }

    #toggle:checked ~ #myDiv {
      display: block;
    }
  </style>

Dans cet exemple, nous utilisons un élément de case à cocher comme déclencheur. Lorsque cette case est cochée, les éléments masqués seront affichés. Cet effet est obtenu grâce à la pseudo-classe :checked et au sélecteur ~ sibling en CSS. Lorsque la case est cochée, son élément frère #myDiv est affiché.

Si vous souhaitez utiliser un lien ou un bouton comme déclencheur, vous pouvez avoir le code suivant :

  <a href="#myDiv" id="toggle">点我显示</a>

  <div id="myDiv">
    这是被隐藏的元素。
  </div>

  <style>
    #myDiv {
      display: none;
    }

    #toggle:focus ~ #myDiv {
      display: block;
    }
  </style>

Dans cet exemple, nous avons utilisé un élément de lien comme déclencheur. Lorsque le lien reçoit le focus, l'élément caché est révélé. Cet effet est obtenu grâce à la pseudo-classe :focus et au sélecteur ~ sibling en CSS. Lorsqu'un lien reçoit le focus, son élément frère #myDiv est affiché.

Vous pouvez également utiliser des éléments d'étiquette avec du contenu en texte brut comme déclencheurs, enveloppez-les simplement dans des éléments d'étiquette et pointez l'attribut for vers l'identifiant de l'élément que vous souhaitez afficher.

Résumé

La technique cliquer pour afficher-masquer de CSS est une méthode utile qui peut être utilisée pour masquer et afficher des éléments en utilisant CSS sans utiliser JavaScript. En utilisant la pseudo-classe :checked et le sélecteur ~ sibling ou la pseudo-classe :focus et le sélecteur ~ sibling, nous pouvons facilement ajouter une fonctionnalité cliquer pour afficher masqué à n'importe quel élément.

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!