Comment implémenter des styles fonctionnels non cliquables en CSS

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.

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!