Comment changer la forme du curseur de la souris avec CSS ? (Exemple de démonstration)

Je crois que lorsque vous parcourez les principaux sites Web, différents styles de souris vous apporteront des expériences différentes. Cet article va vous montrer comment changer la forme de la souris via CSS ? l'attribut du curseur CSS a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Affichage de l'effet

L'attribut curseur précise le type (forme) du curseur à afficher. Cette propriété définit la forme du curseur utilisée lorsque le pointeur de la souris est placé dans les limites d'un élément. Tous les principaux navigateurs prennent en charge l'attribut curseur.

Ci-dessous, nous vous donnerons une introduction détaillée un par un à travers l'exemple de code spécifique du changement de forme du curseur de la souris du curseur CSS :

code html : définir le conteneur

<div class="content">
			<div class="box box1"><a href="">CSS鼠标手型效果</a></div>
			<div class="box box2"><a href="">CSS鼠标手型效果</a></div>
			<div class="box box3"><a href="">CSS鼠标十字型效果</a></div>
			<div class="box box4"><a href="">CSS鼠标问号效果</a></div>
			<div class="box box5"><a href="">CSS鼠标等待效果</a></div>
		</div>

L'attribut main du curseur permet à la souris d'afficher un effet de main

.box1 a{
				background-color: red;
				cursor:hand;
			}

L'attribut pointeur du curseur permet également à la souris d'afficher un effet de main, mais il est compatible avec une variété de navigateurs. Ceci est recommandé

.box2 a{
				background-color: #DBDBDB;
				cursor:pointer;
			}

L'attribut réticule du curseur fait afficher à la souris un effet en forme de croix

.box3 a{
				background-color:#777777;
				cursor:crosshair;
			}

L'attribut aide du curseur fait afficher à la souris un effet de point d'interrogation

.box4 a{
				background-color:#E6E6E6;
				cursor:help;
			}

L'attribut d'attente du curseur Il permet à la souris d'afficher l'effet d'attente, qui est un effet de chargement

	background-color:#2DC4CB;
				cursor:wait;
			}

curseur En plus des effets de forme du curseur de la souris ci-dessus, il existe également des effets de curseur qui indiquent différentes directions de flèche : e-resize (flèche droite), ne-resize (flèche pointant vers le haut vers la droite), n-resize (flèche pointant vers le haut), nw-resize (flèche pointant vers le haut et vers la gauche), w -resize (flèche pointant vers la gauche), sw-resize (flèche pointant vers le bas à gauche), s -resize (flèche vers le bas), se-resize (flèche vers le bas).

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!