Comment masquer les étiquettes en CSS

Méthode : 1. Utilisez l'instruction "opacity:0" ; 2. Utilisez l'instruction "display:none" 3. Utilisez l'instruction "visibility:hidden" 4. Utilisez l'attribut position avec top, L'attribut bottom, left, right déplace l'étiquette de l'élément hors de la zone visuelle.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.

La première méthode consiste à utiliser l'attribut Opacité

Cet attribut permet de récupérer ou de définir l'opacité de l'objet Lorsque sa transparence est de 0, visuellement il l'a. disparu, mais il occupe toujours cette place et joue un rôle dans la mise en page de la page Web. Il répondra également à l’interaction de l’utilisateur. L'arrière-plan et le contenu d'un élément avec cet attribut ajouté changeront également en conséquence. Nous pouvons utiliser cette fonctionnalité pour créer de superbes effets d'animation ici, le code est le suivant :

<.>

Remarque : cet attribut est compatible avec les navigateurs IE9 et supérieurs. IE8 et les versions antérieures prennent en charge des attributs de filtre alternatifs, par exemple : filter:Alpha(opacity=50).

La deuxième méthode consiste à utiliser l'attribut Display

Cet attribut est le véritable élément caché. Lorsque l'attribut display de l'élément est nul, l'élément le fera. disparaîtra de la vue, et même le modèle de boîte ne sera pas généré. Il n'occupera aucune position sur la page. De plus, même ses éléments enfants disparaîtront ensemble du modèle de boîte. Les effets d'animation et les interactions qui y sont ajoutés ainsi que ses éléments enfants n'auront aucun effet. Les méthodes show(), hide() et toggle() de jq obtiennent des effets changeants en modifiant la valeur de display.

La troisième méthode consiste à utiliser l'attribut Visibilité

Cet attribut est similaire à l'attribut opacité lorsque la valeur de l'attribut est. caché, l'élément Il sera masqué, occupera sa propre position et affectera la mise en page de la page Web. La seule différence avec l'opacité est qu'il ne répondra à aucune interaction de l'utilisateur. De plus, des éléments seront masqués dans le logiciel de lecture d’écran. Cette propriété peut également être animée à condition que ses états initial et final soient différents. Cela garantit que l'animation de transition entre les commutateurs d'état de visibilité peut être fluide dans le temps

Remarque :

Toute version d'Internet Explorer (y compris IE8) le fait. ne prend pas en charge les valeurs des attributs « inherit » et « collapse ».

2. Si la visibilité d'un élément est définie sur masquée, mais que vous souhaitez afficher ses éléments enfants, ajoutez simplement visibilité: visible; Essayez de survoler l'élément masqué au lieu de survoler le numéro dans la balise p. Vous constaterez que le curseur de votre souris ne se transforme pas en doigt. À ce stade, lorsque vous cliquez sur la souris, votre événement de clic ne sera pas déclenché. La balise

à l'intérieur de la balise

peut toujours capturer tous les événements de la souris. Une fois que votre souris survole le texte, le

lui-même devient visible et l'enregistrement de l'événement prend effet.

La quatrième méthode consiste à utiliser l'attribut Position

La signification de cet attribut est de déplacer l'élément hors du flux de documents et hors de la zone visuelle Ajout. cet attribut n'affectera pas la mise en page. Il permet également à l'élément de rester opérationnel. Après avoir appliqué cet attribut, vous pouvez principalement contrôler la direction (haut, gauche, droite, bas) pour atteindre une certaine valeur et quitter la page en cours.

Remarque : vous devez éviter d'utiliser cette méthode pour masquer tout élément pouvant être focalisé, car cela entraînerait une erreur indisponible lorsque l'utilisateur donne le focus à cet élément. Cette méthode est souvent utilisée lors de la création de cases à cocher et de boutons radio personnalisés.

Apprentissage recommandé :

Tutoriel vidéo CSS

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!