CSS Cursor property is used to display the type of mouse cursor when the mouse pointer is on the HTML Element. By default, when a cursor hovers over a link, the cursor changes from a pointer to a hand.
There are many type of mouse cursor as below .
- auto : It displays hand over a link when mouse is over on link.
- crosshair : It shows crosshair or the plus sign on the HTML Element.
- default : It shows an arrow sign on the HTML Element.
- e-resize : mouse cursor shows that edge of a box is to be moved right. It represents the east direction.
- help : It shows question mark or ballon which represents that help is available.
- inherit :
- move : It indicates that something is to be shifted.
- ne-resize : Edge of a box is to be moved up and right means north and east direction.
- n-resize : Edge of a box is to be moved up means north direction.
- nw-resize : Edge of a box is to be moved up and left means north and west direction.
- pointer : It shows a pointing hand.
- se-resize : Edge of a box is to be moved down and right means south and east direction.
- s-resize : Edge of a box is to be moved down means south direction.
- sw-resize : Edge of a box is to be moved down and left means south and west direction.
- text : It shows the I bar
- wait : It shows hour glass.
- w-resize : The cursor indicates that an edge of a box is to be moved left (west)
Syntax :
cursor:auto;
cursor:crosshair;
cursor:default;
cursor:e-resize;
cursor:help;
cursor:inherit;
cursor:move;
cursor:ne-resize;
cursor:n-resize;
cursor:nw-resize;
cursor:pointer;
cursor:se-resize;
cursor:s-resize;
cursor:sw-resize;
cursor:text;
cursor:wait;
cursor:w-resize;
Example :
<html>
<head>
<title>Learn Css Cursor tutorials by aryatechno</title>
</head>
<body>
<p style="cursor:auto;">Auto mouse over effect</p>
<p style="cursor:crosshair;">crosshair or the plus sign.</p>
<p style="cursor:default;">default</p>
<p style="cursor:e-resize;">Cursor moves east direction.</p>
<p style="cursor:help;">question mark or ballon</p>
<p style="cursor:move;">moved</p>
<p style="cursor:ne-resize;">Cursor moves north and east direction.</p>
<p style="cursor:n-resize;">Cursor moves north direction.</p>
<p style="cursor:nw-resize;">Cursor moves north and west direction.</p>
<p style="cursor:pointer;">pointing hand.</p>
<p style="cursor:se-resize;">Cursor moves south and east direction.</p>
<p style="cursor:s-resize;">Cursor moves south direction.</p>
<p style="cursor:sw-resize;">Cursor moves south and west direction.</p>
<p style="cursor:text;">the I bar</p>
<p style="cursor:wait;">hour glass</p>
<p style="cursor:w-resize;">Cursor moves west direction.</p>
</body>
</html>
Output :
Auto mouse over effect
crosshair or the plus sign.
default
Cursor moves east direction.
question mark or ballon
moved
Cursor moves north and east direction.
Cursor moves north direction.
Cursor moves north and west direction.
pointing hand.
Cursor moves south and east direction.
Cursor moves south direction.
Cursor moves south and west direction.
the I bar
hour glass
Cursor moves west direction.
Comments