css3 afficher masquer

CSS3 est la dernière spécification CSS, et son émergence rend les effets de conception Web plus colorés. L'une des fonctions couramment utilisées est d'afficher et de masquer.

CSS3 Il existe de nombreuses façons d'implémenter l'affichage et le masquage, qui sont présentées ci-dessous.

1. Utilisez l'attribut display

L'attribut display peut contrôler l'état d'affichage de l'élément, notamment :

• none : masquer l'élément, tout en ne prenant pas de place sur la page.
• block : Affiche l'élément en tant qu'élément de bloc.
• inline : affiche l'élément en tant qu'élément en ligne.
• inline-block : affiche l'élément en tant qu'élément de bloc en ligne.

En modifiant la valeur de l'attribut display, les éléments peuvent être affichés et masqués. Par exemple, le code suivant affiche une image lorsque la souris survole l'élément :

img {
  display: none;
}

div:hover img {
  display: block;
}

Dans le code ci-dessus, l'attribut d'affichage initial de l'image est défini sur none, c'est-à-dire qu'il est masqué. Ensuite, via div:hover img, lorsque la souris survole l'élément div, définissez l'attribut d'affichage de l'image sur block pour l'afficher.

2. Utilisez l'attribut de visibilité

L'attribut de visibilité contrôle la visibilité de l'élément, contrairement à l'attribut d'affichage, définir l'attribut de visibilité sur caché occupera toujours de l'espace sur la page. . Ses valeurs incluent :

• visible : L'élément est visible.
• hidden : L'élément est invisible mais occupe toujours de l'espace sur la page.

Le code suivant implémente l'affichage du contenu du texte lorsque la souris survole l'élément :

div {
  visibility: hidden;
}

div:hover {
  visibility: visible;
}

Dans le code ci-dessus, l'attribut de visibilité initial du div l'élément est défini pour caché, c'est-à-dire pour se cacher. Ensuite, via div:hover, lorsque la souris survole l'élément div, l'attribut de visibilité de l'élément est défini sur visible, ce qui l'affiche.

3. Utilisez l'attribut opacité

L'attribut opacité contrôle la transparence de l'élément. Sa plage de valeurs est de 0 à 1. 0 signifie complètement transparent et 1 signifie complètement opaque. . En modifiant la valeur de l'attribut d'opacité de l'élément, l'élément peut être affiché et masqué. Par exemple, le code suivant implémente l'effet de fondu entrant et sortant de l'élément lorsque la souris survole l'élément :

div {
  opacity: 0;
  transition: opacity .5s ease-in-out;
}

div:hover {
  opacity: 1;
}

Dans le code ci-dessus, l'attribut d'opacité initial de l'élément div est défini sur 0, qui est complètement transparent. Ensuite, via div:hover, lorsque la souris survole l'élément div, définissez la propriété d'opacité de l'élément sur 1, ce qui est totalement opaque. Dans le même temps, l'attribut de transition est ajouté pour obtenir l'effet de fondu entrant et sortant.

Ci-dessus sont plusieurs façons d'utiliser CSS3 pour afficher et masquer, vous pouvez choisir en fonction de vos besoins. Il convient de noter que CSS3 n'est pas compatible avec certains navigateurs plus anciens, les problèmes de compatibilité doivent donc être pris en compte lors de l'écriture du code.

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!