CSS Tutorial

Some time notice that when you move your mouse cursor on any web page’s in different HTML elements then sometimes cursor changes in other icons; this is implemented by CSS cursor property.

There are too many values that can be assigned as the value of cursor according to our web page requirement.

Description of cursor with example

The CSS cursor property has many values, and the values depend on you, how do you want to be set the cursor looks like on hovering the mouse pointer on an HTML element;
Because that the CSS cursor property use with a different scenario;
Suppose that, if you have an image button in web page BUT it is clickable or not how you can differentiate it, just change cursor style when someone hovers the mouse pointer on the image button then the user easily understand it's a clickable element;

Example of CSS Cursor

<html>
<body>
    <p style="cursor: auto">Auto Cursor</p>
    <p style="cursor: crosshair">Crosshair Cursor</p>
    <p style="cursor: default">Default Cursor</p>
    <p style="cursor: pointer">Pointer Cursor</p>
    <p style="cursor: move">Move Cursor</p>
    <p style="cursor: text">Text Cursor</p>
    <p style="cursor: wait">Wait Cursor</p>
    <p style="cursor: help">Help Cursor</p>
    <p style="cursor: e-resize">e-resize Cursor</p>
    <p style="cursor: ne-resize">ne-resize Cursor</p>
    <p style="cursor: nw-resize">nw-resize Cursor</p>
    <p style="cursor: n-resize">n-resize Cursor</p>
    <p style="cursor: se-resize">se-resize Cursor</p>
    <p style="cursor: sw-resize">sw-resize Cursor</p>
    <p style="cursor: s-resize">s-resize Cursor</p>
    <p style="cursor: w-resize">w-resize Cursor</p>
</body>
</html>

Output

Auto Cursor

Crosshair Cursor

Default Cursor

Pointer Cursor

Move Cursor

Text Cursor

Wait Cursor

Help Cursor

e-resize Cursor

ne-resize Cursor

nw-resize Cursor

n-resize Cursor

se-resize Cursor

sw-resize Cursor

s-resize Cursor

w-resize Cursor

Cursor Property Values

CSS Cursor Value	Description
auto	The browser sets a cursor by default; The cursor depends on the context area
crosshair	The cursor icon looks like plus sign, it's render as a crosshair
default	The default symbol of cursor
pointer	The cursor is a pointer and indicates a link to changes in pointing hand
move	The 'I' bar, to indicate moveable object
e-resize	The cursor indicates that an edge is to be moved right (east)
ne-resize	The cursor indicates like as element to be moved up and right (north/east)
nw-resize	The cursor indicates that an edge of a box is to be moved up and left (north/west)
n-resize	The cursor indicates that an edge of a box is to be move up (north)
se-resize	The cursor indicates that an edge of a box is to be move down and right (south/east)
sw-resize	The cursor indicates that an edge of a box is to be move down and left (south/west)
s-resize	The cursor indicates that an edge of a box is to be move down (south)
w-resize	The cursor indicates that an edge of a box is to be move left (west)
help	The cursor indicates like question mark or balloon
wait	The cursor indicates that the program is busy, and the user can't interact with the interface
<url>	The source of a cursor image file
text	The cursor indicates text that may be selected

← Previous Next →

CSS Tutorial

CSS Tutorials

CSS Cursor Property

CSS cursor, Cursor Properties, Cursor Property Values, Example of CSS Cursor

Description of cursor with example

Example of CSS Cursor

Output

Cursor Property Values

Related Topics

Related Topics

Policy & Disclosure

Popular

LifeStyle & Fun