Maison > interface Web > tutoriel CSS > Comment définir la forme du curseur de la souris avec CSS

Comment définir la forme du curseur de la souris avec CSS

王林
Libérer: 2023-01-03 09:25:17
original
3888 Les gens l'ont consulté

Comment définir la forme du curseur de la souris avec CSS : vous pouvez utiliser l'attribut du curseur pour le définir, tel que [crosshair], ce qui signifie définir le curseur comme une forme de réticule.

Comment définir la forme du curseur de la souris avec CSS

L'environnement d'exploitation de cet article : système Windows 10, CSS 3, ordinateur thinkpad t480.

Introduction à l'attribut :

l'attribut curseur définit la forme du curseur utilisée lorsque le pointeur de la souris est placé dans les limites d'un élément.

Valeurs d'attribut communes :

  • texte Ce curseur indique du texte.

  • attendre Ce curseur indique que le programme est occupé (généralement une montre ou un sablier).

  • aide Ce curseur indique l'aide disponible (généralement un point d'interrogation ou une bulle).

  • auto par défaut. Le curseur défini par le navigateur.

  • réticule Le curseur est rendu sous forme de réticule.

  • pointeur Le curseur est rendu sous forme de pointeur (une main) indiquant le lien

Comment définir la forme du curseur de la souris :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网</title> 
</head>
<body>
<p>请把鼠标移动到单词上,可以看到鼠标指针发生变化:</p>
<span style="cursor:auto">auto</span><br>
<span style="cursor:crosshair">crosshair</span><br>
<span style="cursor:default">default</span><br>
<span style="cursor:e-resize">e-resize</span><br>
<span style="cursor:help">help</span><br>
<span style="cursor:move">move</span><br>
<span style="cursor:n-resize">n-resize</span><br>
<span style="cursor:ne-resize">ne-resize</span><br>
<span style="cursor:nw-resize">nw-resize</span><br>
<span style="cursor:pointer">pointer</span><br>
<span style="cursor:progress">progress</span><br>
<span style="cursor:s-resize">s-resize</span><br>
<span style="cursor:se-resize">se-resize</span><br>
<span style="cursor:sw-resize">sw-resize</span><br>
<span style="cursor:text">text</span><br>
<span style="cursor:w-resize">w-resize</span><br>
<span style="cursor:wait">wait</span><br>
</body>
</html>
Copier après la connexion

Apprentissage associé : Tutoriel 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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal