CSS Cursor

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 .

  1.  auto :  It displays hand over a link when mouse is over on link.
  2. crosshair : It shows crosshair or the plus sign on the HTML Element.
  3. default : It shows an arrow sign on the HTML Element.
  4. e-resize : mouse cursor shows that edge of a box is to be moved right. It represents the east direction.
  5. help : It shows question mark or ballon which represents that help is available.
  6. inherit :
  7. move : It indicates that something is to be shifted.
  8. ne-resize : Edge of a box is to be moved up and right means north and east direction.
  9. n-resize : Edge of a box is to be moved up means north direction.
  10. nw-resize : Edge of a box is to be moved up and left means north and west direction.
  11. pointer : It shows a pointing hand.
  12. se-resize : Edge of a box is to be moved down and right means south and east direction.
  13. s-resize : Edge of a box is to be moved down means south direction.
  14. sw-resize : Edge of a box is to be moved down and left means south and west direction.
  15. text : It shows the I bar
  16. wait : It shows hour glass.
  17. 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

Leave a Reply

Your email address will not be published. Required fields are marked *

60531