Comment changer la forme de la souris avec CSS-tutoriel CSS-php.cn

Comment changer la forme de la souris avec CSS

王林

Libérer： 2023-01-06 11:14:38

original

2916 Les gens l'ont consulté

La façon de changer la forme de la souris en CSS consiste à ajouter l'attribut du curseur à l'élément spécifié et à définir la valeur de l'attribut sur la valeur requise, telle que le pointeur, le déplacement, le texte, etc. Le code spécifique est comme [Pointeur].

Comment changer la forme de la souris avec CSS

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

CSS nous fournit un attribut très utile, qui est l'attribut curseur.

L'attribut curseur précise le type (forme) du curseur à afficher.

Certaines valeurs d'attribut couramment utilisées :

default Curseur par défaut (généralement une flèche)
auto Default. Le curseur défini par le navigateur.
réticule Le curseur est rendu sous forme de réticule.
pointeur Le curseur est rendu sous la forme d'un pointeur (une main) indiquant le lien
déplacer Ce curseur indique qu'un objet peut être déplacé. .
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).

Exemple de code :

<html>

<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:pointer">
Pointer</span><br />
<span style="cursor:move">
Move</span><br />
<span style="cursor:e-resize">
e-resize</span><br />
<span style="cursor:ne-resize">
ne-resize</span><br />
<span style="cursor:nw-resize">
nw-resize</span><br />
<span style="cursor:n-resize">
n-resize</span><br />
<span style="cursor:se-resize">
se-resize</span><br />
<span style="cursor:sw-resize">
sw-resize</span><br />
<span style="cursor:s-resize">
s-resize</span><br />
<span style="cursor:w-resize">
w-resize</span><br />
<span style="cursor:text">
text</span><br />
<span style="cursor:wait">
wait</span><br />
<span style="cursor:help">
help</span>
</body>

</html>

Copier après la connexion

Vous pouvez copier ce qui précède et l'exécuter localement pour voir l'effet d'exécution spécifique.

Partage de vidéos associées : 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!