English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
The CSS cursor property specifies the type of cursor to display when the pointer is placed over an element.
The following table provides usage instructions and version history for this property, as well as the syntax for using it in JavaScript scripts.
| Default value : | Commun |
|---|---|
| Applies to : | All elements |
| Inheritance : | Yes |
| Animatable : | No.See also Animation properties。 |
| Version : | CSS 2、3 |
| JavaScript syntax : | object.style.cursor="context-menu" |
该属性的语法如下：
cursor: [url(address of cursor file),] 0 or more times | auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | cursor: l'utilisation de la syntaxe-La syntaxe de cet attribut est la suivante :-cursor: [url(address of cursor file),] 0 or more times | auto | default | none | e-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text |-alias | copy | move | no-drop | not-allowed | grab | grabbing |-resize | n-resize | ne-resize | ns ew-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ns all-resize | nesw-resize | nwse-resize | col
resize | row
scroll | zoom1 in | zoom
out | initial | inherit
cursor: copy;
Les exemples suivants montrent comment utiliser l'attribut cursor.
Exemple
cursor: copy;
h
{
cursor: copy;p {/cursor: help;a {
cursor: url("custom.gif"), url("custom.cur"), default;Si aucun curseur utilisateur défini n'est valable ou n'est pris en charge par le navigateur, le curseur générique à la fin de la liste sera utilisé.
Valeur de l'attribut
| Le tableau suivant décrit les valeurs de cet attribut. | Valeur | Voir |
|---|---|---|
| Description | ||
| Commun | auto | |
| Le navigateur détermine le curseur à afficher en fonction du contexte actuel. Par exemple, lorsque vous passez le curseur sur du texte. C'est la valeur par défaut. | default | |
| Le curseur par défaut de la plate-forme, indépendamment du contexte, est généralement une flèche. | none | |
| Aucun curseur n'est affiché. | initial | |
| Réinitialisez cet attribut à sa valeur par défaut. | inherit | |
| Si spécifié, l'élément lié utilise la valeur de l'attribut cursor de son élément parent. | ||
| context-menu | Indique que le menu contextuel est disponible. | |
| help | Indique l'aide. | |
| pointer | Indique le curseur de lien, généralement une main avec l'index tendu. | |
| progress | Indicateur de progression. Le programme effectue certains traitements, mais l'utilisateur peut toujours interagir avec l'interface (différent de wait). | |
| wait | Indique que le programme est occupé et que l'utilisateur doit attendre. | |
| Cursor de sélection | ||
| cell | Indique que l'on peut sélectionner une cellule (ou un groupe de cellules). | |
| crosshair | Un simple pointeur croisé. Utilisé généralement pour indiquer une sélection dans un bitmap. | |
| text | Indique que le texte sélectionnable est généralement une poutre transversale. | |
| vertical-text | Indique que le texte vertical peut être sélectionné, c'est-à-dire une poutre transversale. | |
| Cursor de glisser-déposer | ||
| alias | Indique que la création d'un alias ou d'un raccourci est souhaitée. | |
| copy | Indique que le contenu peut être copié. | |
| move | Indique que l'objet suspendu peut être déplacé. | |
| no-drop | Indique que l'élément glissé ne peut pas être placé à l'endroit actuel. | |
| not-allowed | Indique que quelque chose ne peut pas être fait. | |
| Cursor d'ajustement de la taille et de défilement | ||
| all-scroll | Indique que le défilement peut être effectué dans n'importe quelle direction (translation). | |
| col-resize | Indique que la taille de la colonne peut être ajustée horizontalement. | |
| row-resize | Indique que la taille de la ligne peut être ajustée verticalement. | |
| n-resize | Indique que certaines marges doivent être déplacées vers le haut (Nord). | |
| e-resize | Indique que certaines marges doivent être déplacées vers la droite (Est). | |
| s-resize | Indique que certaines marges doivent être déplacées vers le bas (Sud). | |
| w-resize | Indique que certaines marges doivent être déplacées vers la gauche (Ouest). | |
| ne-resize | Indique que certaines marges doivent être déplacées vers le haut et vers la droite (Nord)./Est). | |
| nw-resize | Indique que certaines marges doivent être déplacées vers le haut (Nord)./Ouest). | |
| se-resize | Indique que certaines marges doivent être déplacées vers la droite (Sud)./Est). | |
| sw-resize | Indique que certaines marges doivent être déplacées vers le bas (Sud)./Ouest). | |
| ew-resize | Indique que l'ajustement bidirectionnel de la taille est possible. | |
| ns-resize | ||
| nesw-resize | ||
| nwse-resize | ||
| Cursor de zoom | ||
| zoom-in | Indique que quelque chose peut être agrandi. | |
| zoom-out | Indique que quelque chose peut être rétréci. | |
| grab | Indique que quelque chose peut être pris (glissé pour le déplacer). | |
| grabbing | Indique que quelque chose est pris. | |
La compatibilité du curseur de navigateur de propriété cursor, les numéros dans le tableau suivant représentent la version minimale du navigateur prenant en charge cette propriété ; tous les navigateurs populaires prennent en charge cette propriété.
|
Voir la leçon :Cursor CSS。