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

Laquelle des nombreuses méthodes de masquage d'éléments en CSS peut déclencher des événements de clic ?

angryTom
Libérer: 2019-10-24 17:31:34
original
6445 Les gens l'ont consulté

Laquelle des nombreuses méthodes de masquage d'éléments en CSS peut déclencher des événements de clic ?

Parmi les différentes façons de masquer des éléments en CSS, l'événement click peut être déclenché par

avec l'opacité définie à 0 méthode.

Comment masquer des éléments en CSS :

1 display:none;

.box{
    display: none;
}
Copier après la connexion

La manière la plus simple et la plus grossière est de définir l'attribut d'affichage de. l'élément n'est aucun.

Les éléments définis pour display:none; n'occuperont plus l'espace de la page, et l'espace qu'ils occupent sera occupé par d'autres éléments, ce qui entraînera la réorganisation et le réassemblage du navigateur.

2. visibilité : cachée

.box{
    visibility: hidden;
}
Copier après la connexion

Bien que cette méthode puisse masquer l'élément, l'élément occupera toujours l'espace de la page, cela provoquera donc uniquement la réorganisation du navigateur sans provoquer de redistribution.

Si vous souhaitez que l'élément soit masqué sans provoquer de modifications dans la mise en page, il est recommandé d'utiliser la méthode visibilité:hidden;

3. Opacité : 0 ; (filtre : alpha(opacité=0 ); les deux doivent être écrits pour tenir compte de la compatibilité)

 Définissez l'attribut d'opacité de transparence de l'élément sur 0, vous pouvez également masquer la page. éléments.

.box{
    opacity:0;
}
Copier après la connexion

est présenté de la même manière que visibilité:hidden et occupera également l'espace de la page.

Différence de liaison d'événement :

display:none; L'élément disparaîtra directement de la page, donc l'événement lié ​​à l'élément ne le fera pas. effet .

visibilité : masqué ; l'élément ne déclenchera pas l'événement lié . L'élément

avec

opacity:0; déclenchera l'événement lié , par exemple, cliquer déclenchera la fonction de clic.

Pour plus de connaissances HTML/css, vous pouvez suivre le site Web PHP chinois Tutoriel vidéo HTML et 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!

Étiquettes associées:
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal