Maison >interface Web >tutoriel CSS >Comment changer le style de la souris avec CSS

Comment changer le style de la souris avec CSS

醉折花枝作酒筹
醉折花枝作酒筹original
2021-04-02 15:55:395687parcourir

En CSS, vous pouvez définir le style de la souris via l'attribut curseur, le format de syntaxe est "cursor: value;". L'attribut curseur est utilisé pour spécifier le type (forme) du curseur à afficher. Vous pouvez définir la forme du curseur utilisée lorsque le pointeur de la souris est placé dans les limites d'un élément.

Comment changer le style de la souris avec CSS

L'environnement d'exploitation de cet article : système Windows 7, version HTML5&&CSS3, ordinateur DELL G3

Parfois, nous ne voulons pas ajouter de texte , images et liens, mais le style de la souris lorsque vous souhaitez ajouter un lien. Cela utilise le curseur dans notre css pour définir la forme du pointeur de la souris.

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.

Voici quelques valeurs d'attribut du pointeur de la sourisattribut du curseur :

Comment changer le style de la souris avec CSS

Exemple :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></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>

De cette façon, la souris est devenue ce dont nous avions besoin.

Comment changer le style de la souris avec CSS

Explication : Il existe une autre utilisation de

Le principe est : utiliser un attribut CSS2 cursor de cursor:url (url), le fichier de la souris. peut utiliser différents formats de fichiers jpg, gif, ani et cur. A noter que cette méthode ne peut être affichée normalement que dans les navigateurs ci-dessus IE5.5.

Apprentissage recommandé : "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!

Déclaration:
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
Article précédent:qu'est-ce que l'héritage CSSArticle suivant:qu'est-ce que l'héritage CSS