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

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

angryTom
angryTomoriginal
2019-10-22 14:03:026419parcourir

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;
}

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;
}

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;
}

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!

Déclaration:
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