Maison  >  Article  >  interface Web  >  Comment implémenter des styles fonctionnels non cliquables en CSS

Comment implémenter des styles fonctionnels non cliquables en CSS

青灯夜游
青灯夜游original
2021-07-02 16:35:243562parcourir

Méthode d'implémentation : 1. Ajoutez directement le style "pointer-events:none;" à l'élément pour interdire le déclenchement d'événements et le rendre non cliquable. 2. Ajoutez d'abord le style "cursor:not-allowed;" à l'élément, puis utilisez le code js pour empêcher le déclenchement de l'événement click, le rendant ainsi non cliquable.

Comment implémenter des styles fonctionnels non cliquables en CSS

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

Le style lorsque la souris n'est pas cliquable

cursor:not-allowed;

L'effet est le suivant :

Il est à noter que même si le style est affiché comme non cliquable, cliquer déclenchera quand même l'événement correspondant.

Interdire le déclenchement d'événements

pointer-events:none;

L'utilisation de ce style empêchera le déclenchement d'événements. La souris sera affichée dans un style flèche ;

Si ces deux styles sont utilisés en même temps, le déclenchement de l'événement sera empêché, mais la souris ne sera pas affichée dans un style désactivé comme nous le souhaitons, mais sera affiché dans un style de flèche.

Ainsi, lorsque nous implémentons l'effet, nous pouvons utiliser cursor:not-allowed; puis utiliser le code js pour empêcher le déclenchement de l'événement

cursor:not-allowed;
pointer-events:none;

(Partage vidéo d'apprentissage : 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