Quel est l'attribut curseur du CSS ? Utilisation de l'attribut curseur

Le contenu de cet article est de vous présenter quel est l'attribut curseur du CSS ? Utilisation de l'attribut curseur. Il 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.

Tout d’abord, comprenons ce qu’est l’attribut du curseur ? Qu'est-ce que ça fait ?

L'attribut curseur est l'attribut curseur en CSS. Il précise le type de curseur de la souris qui peut être utilisé lorsque la souris est située sur l'élément d'application, c'est-à-dire : spécifier le type (forme) du curseur à utiliser. être affiché.

Nous pouvons définir le curseur sur l'un des nombreux types de curseur prédéfinis via l'attribut curseur, ou sur une image (comme dans l'exemple ci-dessous).

Remarque : L'attribut cursor n'est valable que pour les appareils dotés de dispositifs de pointage (tels que les souris). Cela n’a aucun effet sur les appareils tactiles.

L'attribut curseur est utilisé pour fournir un retour visuel et des indices à l'utilisateur afin de fournir certaines fonctionnalités sur l'élément, ce qui est souvent important pour offrir une meilleure expérience utilisateur.

La valeur du curseur définie en CSS peut présenter différents effets selon le navigateur et le système d'exploitation. Par exemple, certains navigateurs (tels que Firefox sur Windows 7) afficheront le curseur de déplacement (généralement utilisé pour indiquer qu'un élément peut être déplacé) sous la forme d'une flèche à quatre directions, tandis que d'autres navigateurs (tels que Firefox sur Mac OS X) afficheront Curseur de main. Dans ce cas, si vous souhaitez que le curseur soit un curseur spécifique qui ait exactement la même apparence sur tous les navigateurs et plates-formes, vous souhaiterez peut-être utiliser une image au lieu du mot-clé CSS par défaut.

Syntaxe officielle

Syntaxe :

cursor: [ [<URI> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress ] ] | inherit ;

Initial : Automatique

S'applique à :Tous les éléments

Animation :Aucun

Nouvelle syntaxe CSS3 :

En CSS3, des valeurs et des options supplémentaires ont été ajoutées à l'attribut du curseur, jetons un œil ci-dessous :

cursor: [ [ <URI> [<x> <y>]?,]* [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out | grab | grabbing ] ]；

Remarque :

1. Tous les navigateurs ne prennent pas en charge toutes les valeurs ci-dessus, et toutes les valeurs ne sont pas prises en charge dans tous les navigateurs et systèmes d'exploitation. systèmes. Ils se ressemblent tous.

2. Curseur d'image (curseur personnalisé)

 : Image de référence

Une ou plusieurs URL séparées par des virgules() pointe vers l’image à utiliser comme curseur.

cursor：url（例如1：.svg #linkcursor），url（例如2： .cur），auto ;

Remarque : Le mot-clé de curseur standard non URL doit être fourni à la fin de la liste de secours.

: Définissez les coordonnées

en utilisant des valeurs sans unités, les valeurs négatives ne sont pas autorisées ; ces valeurs précisent les coordonnées du point chaud du curseur. Le premier nombre est la coordonnée x et le deuxième nombre est la coordonnée y. Par exemple, ce qui suit :

cursor: url(some-cursor.png) 2 15, pointer;

définit le point chaud du curseur sur (2,15) pixels en commençant par le coin supérieur gauche (0,0).

Si elles ne sont pas spécifiées, les coordonnées du hotspot sont lues à partir du fichier lui-même (pour les fichiers CUR et XBM), ou définies dans le coin supérieur gauche de l'image.

Regardons un curseur d'image :

3. Formes de curseur couramment utilisées

aucune : Définissez le le curseur n'est pas affiché

est généralement présenté comme une flèche : par défaut, auto, menu contextuel

est généralement présenté comme une main : pointeur, saisir, saisir, main

aide : est généralement présenté sous la forme d'un point d'interrogation ou d'un ballon

attendre pour charger : progression (ballon de plage qui tourne, ou flèche avec montre ou sablier), attendre (montre ou sablier)

indique une direction ou un mouvement :
e- resize, ne-resize, n-resize, nw-resize, w-resize, sw-resize, s-resize, se-resize, ew-resize, ns-resize, nesw-resize, nwse- resize, col-resize, row-resize,, all-scroll, move

indique une interdiction : non-drop, non autorisé

Prise en charge du navigateur

Les versions suivantes sont prises en charge :

* indique un préfixe requis.

Résumé : Ce qui précède représente l'intégralité du contenu de cet article. Vous pouvez le compiler vous-même et voir la forme du curseur définie par chaque valeur d'attribut de l'attribut curseur. J'espère que cela sera utile à l'apprentissage de tout le monde. D'autres didacticiels vidéo connexes sont recommandés : tutoriel CSS3 !

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!