Search within TutorialsPark

CSS3 Navigation


To change the appearance of the mouse pointer.


CSS Cursor

Hover the mouse over the boxes to see the cursor appearance.

alias auto cell context-menu col-resize copy crosshair default e-resize ew-resize help move n-resize ne-resize nesw-resize ns-resize nw-resize nwse-resize no-drop none not-allowed pointer progress row-resize s-resize se-resize text URL vertical-text w-resize wait zoom-in zoom-out inherit

1. Depending upon the content under the mouse pointer, the browser(by default) changes appearance of the mouse pointer.

2. However, users can override the default behaviour and take control on how the cursor should look like.

3.In order to change the look of the cursor you need to the CSS cursor property.It accepts keywords as values as listed in the table below.


CSS Example : CSS Cursors

Give it a TRY! » Note: The actual appearance of cursor depends upon both the operating system as well as the browser .


Creating a Simple Horizontal Navigation Bar

Value Description Cursor
alias Indicates that an alias or shortcut is to be created Hover
all-scroll It defines the counter which is to be incremented.It defines the number by which the counter will get incremented on each occurence of a given selector. Hover
auto Browser selects cursor based on current context Hover
cell Indicates a cell or set of cells may be selected Hover
context-menu Context menu is available for the current object Hover
col-resize To denote that the column can be resized horizontally Hover
copy To denote that something is to be copied Hover
crosshair Displays two thin intersecting lines Hover
default Default cursor - usually an arrow Hover
e-resize To denote that the edge of the box is about to be moved right(east) Hover
ew-resize To denote a bidirectional resize cursor Hover
help Help is available Hover
move Indicates that something is to be moved Hover
n-resize To denote that the edge of the cursor is about to be moved up(north) Hover
ne-resize To denote that the edge of the cursor is about to be moved in north east direction Hover
nesw-resize To denote a bidirectional resize cursor Hover
ns-resize To denote that the edge of the cursor is about to be moved in north south direction Hover
nw-resize To denote that the edge of the cursor is about to be moved in north west direction Hover
nwse-resize To denote a bidirectional resize cursor Hover
ns-resize The cursor denotes that an edge of the box is about to be moved north/south Hover
nw-resize The cursor denotes that an edge of the box is about to be moved north/west Hover
nwse-resize To denote a bidirectional resize cursor Hover
no-drop Indicates that the dragged item cannot be dropped at the current location Hover
not-allowed The requested action will not be carried out Hover
pointer To denote a link Hover
progress To denote a progress or busy Hover
row-resize To denote that the row can be resized vertically Hover
s-resize The cursor denotes that an edge of the box is about to be moved south Hover
se-resize The cursor denotes that an edge of the box is about to be moved south-east Hover
sw-resize The cursor denotes that an edge of the box is about to be moved south-west Hover
text To denote that the text can be selected Hover
URL To specify paths of custom cursors Hover
vertical-text The cursor denotes that the vertical text may be selected Hover
w-resize The cursor denotes that an edge of the box is about to be moved left(west) Hover
wait The cursor denotes that the program is busy Hover
zoom-in The cursor denotes that the subject can be zoomed-in Hover
zoom-out The cursor denotes that the subject can be zoomed-out Hover
inherit The value is inherited by the parent element Hover