CSS Cursor

SQL     Data Warehousing     CSS     PHP     HTML     Database Normalization


CSS Tutorial  >  Cursor

At some websites, you'll see different mouse cursors. This is set via the cursor property.

Below we list the commonly-seen cursors, as well as how they are declared. To view what a cursor looks like, just mouse over the "Result" column.

CSS DeclarationResult
{ cursor: crosshair; }
Mouse cursor is set to crosshair
{ cursor: pointer; }
Mouse cursor is set to pointer
{ cursor: text; }
Mouse cursor is set to text
{ cursor: move; }
Mouse cursor is set to move
{ cursor: wait; }
Mouse cursor is set to wait
{ cursor: help; }
Mouse cursor is set to help
{ cursor: progress; }
Mouse cursor is set to progress
{ cursor: not-allowed; }
Mouse cursor is set to not-allowed
{ cursor: no-drop; }
Mouse cursor is set to no-drop
{ cursor: no-vertical-text; }
Mouse cursor is set to no-vertical-text
{ cursor: all-scroll; }
Mouse cursor is set to all-scroll
{ cursor: col-resize; }
Mouse cursor is set to col-resize
{ cursor: row-resize; }
Mouse cursor is set to row-resize
{ cursor: e-resize; }
Mouse cursor is set to e-resize
{ cursor: ne-resize; }
Mouse cursor is set to ne-resize
{ cursor: n-resize; }
Mouse cursor is set to n-resize
{ cursor: nw-resize; }
Mouse cursor is set to nw-resize
{ cursor: w-resize; }
Mouse cursor is set to w-resize
{ cursor: sw-resize; }
Mouse cursor is set to sw-resize
{ cursor: s-resize; }
Mouse cursor is set to s-resize
{ cursor: se-resize; }
Mouse cursor is set to se-resize

We can also specify a custom image for the mouse cursor. The syntax for doing this is:

{ cursor: url(image_url); }

Next Page: CSS Wrap




Copyright © 2014   1keydata.com   All Rights Reserved   Privacy Policy   About   Contact