À propos de l'ajout d'un événement de bouton CSS (comment écrire un événement de clic de souris CSS)

ainer">

Nous devons en fait définir plusieurs fois les effets de la souris sur les pages Web. Certains sont générés automatiquement, comme un lien. Lorsque la souris est déplacée vers le haut, elle se transforme automatiquement en main lorsque vous cliquez dessus. , parfois, lorsqu'il y a une zone de saisie, la souris se transforme automatiquement en un I majuscule anglais. Alors pouvons-nous définir plus d'objets pour qu'ils ressemblent à ce dont nous avons besoin ? Voyons l'effet ensuite.

Autres événements de souris :

onClick : événement de clic de souris. (Fait référence à l'événement de clic de souris, puis le libère.)

onDblClick : événement de double-clic de souris, relâché et enfoncé à nouveau. )

onMouseDown : (s'est produit lorsque le. la souris est enfoncée.)

onMouseUp : (fait référence à l'événement de relâchement de la souris de l'état enfoncé à la fenêtre contextuelle. .)

onMouseMove : événement de mouvement de la souris (fait référence au déplacement de la souris sur un élément spécifique.)

onMouseOver : (fait référence à, se produit lorsque le pointeur se déplace de l'extérieur vers l'élément.)

onMouseOut : événement de sortie de la souris (se produit lorsque la souris quitte un élément spécifique.)

onLoad : événement de chargement (se produit lorsque l'image. ou la page termine le chargement.)

onUnload : événement de déchargement. )

onScroll : événement de défilement de la barre de défilement (généré lorsqu'un visiteur monte ou descend à l'aide de la molette de défilement.)

Cas :

Appliquez ce style personnalisé à l'image. et prévisualisez-la dans le navigateur. L'image devient en noir et blanc. Nous définissons un autre style ".over". Ce style n'a pas de contenu et est un style vide est le suivant :

<div onmouseover=\"this.className=\'over\';\"><div onmouseover=\"this.className=\'over\'; this.id=\'over\';\"><div onmouseover=\"this.style.background=\'url(bj.png) no-repeat\';\" onmouseout=\"…;…\">

Ajoutez ensuite "onMouseOver=". " this.className à la balise image (IMG) ='over'" onMouseOut="this.className='out'"", ce qui signifie que lorsque la souris passe au-dessus, l'image est dans le style over, c'est-à-dire un image en couleur normale ; lorsque la souris quitte, l'image est dans le style out, c'est-à-dire une image en noir et blanc. oMouseOver et onMouseOut sont des événements de souris, this.className="..." signifie le nom de classe de l'objet actuel. c'est..., faites attention à ne pas écrire une mauvaise majuscule, JS est très sensible aux majuscules

De cette façon, l'effet est terminé, enregistrez-le et parcourez-le Lorsque vous l'ouvrez dans le navigateur, l'image est en noir et blanc. Lorsque la souris est déplacée vers le haut, l'image devient colorée. Lorsque la souris est éloignée, l'image redevient en noir et blanc. Tant que vous utilisez votre imagination, vous pouvez créer beaucoup de belles choses grâce à la méthode this.className Mouse. effet

Pointeur de la souris :

<style type=\"text/css\">  .over {}.out {filter: Gray}</style>

Définition et utilisation du CSS

 : le sélecteur de survol est utilisé pour sélectionner l'élément sur lequel le pointeur de la souris flotte

Conseils : Le sélecteur :hover peut être utilisé pour tous les éléments, pas seulement pour les liens. .

Conseils : le sélecteur :link définit le style des liens vers les pages qui n'ont pas été visitées, le sélecteur :visited est utilisé pour définir les liens vers les pages qui ont été visitées et le sélecteur :active est utilisé pour les liens actifs.

Remarque : Dans la définition CSS, :hover doit être placé après :link et :visited (si présent) pour que le style prenne effet.

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!