The type of cursor to display as the mouse pointer moves over the object.
Syntax cursor: cursor_type ;
Cursor_Types:
all-scroll - Indicate that the page can be scrolled in any direction. In firefox a hand, in Webkit and IE crossed arrows.
auto - Browser determines which cursor to display based on the current context. (Default.)
col-resize - Arrows pointing left and right with a vertical bar separating them, indicating that the item can be resized horizontally.
crosshair - Simple cross hair.
default - Platform-dependent default cursor; usually an arrow.
hand - Hand with the first finger pointing up, as when the user moves the pointer over a link.
help - Question mark, indicating help is available.
move - Crossed arrows, indicating something is to be moved.
no-drop - No entry symbol, indicating that the dragged item cannot be dropped at the current cursor location.
not-allowed - No entry symbol, indicating that the requested action will not be carried out.
pointer - Hand with the first finger pointing up, as when the user moves the pointer over a link.
progress - Arrow with an hourglass next to it, indicating that a process is running in the background*.
row-resize - Arrows pointing up and down with a horizontal bar separating them, indicating that the item/row can be resized vertically.
text - Editable text; usually an I-bar.
url(uri) - Cursor is defined by the author, using a custom URI, such as url('mycursor.cur') or url('mycursor.ani').
vertical-text - Editable vertical text, indicated by a horizontal I-bar.
wait - Hourglass or watch, indicating that the program is busy and the user should wait*.n-resize - Cursor indicating that an edge can be moved up (north)
ne-resize - Cursor indicating that an edge can be moved up and right (north/east)
e-resize - Cursor indicating that an edge can be moved right (east)
se-resize - Cursor indicating that an edge can be moved down and right (south/east)
s-resize - Cursor indicating that an edge can be moved down (south)
sw-resize - Cursor indicating that an edge can be moved down and left (south/west)
w-resize - Cursor indicating that an edge can be moved left (west)
nw-resize - Cursor indicating that an edge can be moved up and left (north/west)
* Setting a custom cursor shape will not have any effect on user interaction with the page.
Examples:
h1 { cursor: pointer; }
.emw3class { cursor: progress; }
#emw3id { cursor: crosshair; }
Try it:
Give us something familiar Something similar To what we know already That will keep us steady Steady, steady Steady going nowhere |
(CSS 2) Browser Support: All major browsers
“An arrow may fly through the air and leave no trace; but an ill thought leaves a trail like a serpent” ~ Charles Mackay
Related:
cursor - MDN Web Docs.
appearance - Make an element look like a standard user interface element.