CSS cursor property
How to change the cursor style using CSS

CSS cursor property

Using CSS (Cascading style sheet), we can change the Cursor image with different styles such as handy, cross-hair, pointer, help, e.t.c. this CSS property is used mainly for better clarity and for user-satisfaction with different cursor styles. Different type of cursor plays individually effects with individual web element or the HTML element.

CSS cursor property provides you the ability to change the cursor image corresponding to its HTML element.

how-to-change-the-cursor-using-css-cursor-property
CSS Cursor Property

we will see here, how to change the cursor image using different CSS cursor property.

Sr no.Value and description
1auto
automatically identify and change the cursor image.
for example vertical bar(|) over a text context, hand over links and so on..
2crosshair
a crosshair or plus sign (+).
3default
default cursor (An arrow).
4Pointer
A pointing hand. (in IE 4 this value is hand).
5move
(the vertical bar (|))
6e-resize
The cursor indicates that an edge of a box is to be moved right (east)
7ne-resize
The cursor indicates that an edge of a box is to be moved up and right (north/east)
8nw-resize
The cursor indicates that an edge of a box is to be moved up and left (north/west)
9n-resize
The cursor indicates that an edge of a box is to be moved up (north)
10se-resize
The cursor indicates that an edge of a box is to be moved down and right (south/east)
11sw-resize
The cursor indicates that an edge of a box is to be moved down and left (south/west)
12s-resize
The cursor indicates that an edge of a box is to be moved down (south)
13w-resize
The cursor indicates that an edge of a box is to be moved left (west)
14text
The I bar
15wait
An hour glass
16help
A question mark or balloon, ideal for use over help buttons
17<url>
The source of a cursor image file
CSS cursor property

Note – You should try to use only these values to add helpful information for users, and in places, they would expect to see that cursor. For example, using the crosshair when someone hovers over a link can confuse visitors.

Here is an example −

<html>
   <head>
   </head>
   
   <body>
      <p>Move the mouse over the words to see the cursor change:</p>
      
      <div style = "cursor:auto">Auto</div>
      <div style = "cursor:crosshair">Crosshair</div>
      <div style = "cursor:default">Default</div>
      
      <div style = "cursor:pointer">Pointer</div>
      <div style = "cursor:move">Move</div>
      <div style = "cursor:e-resize">e-resize</div>
      <div style = "cursor:ne-resize">ne-resize</div>
      <div style = "cursor:nw-resize">nw-resize</div>
      
      <div style = "cursor:n-resize">n-resize</div>
      <div style = "cursor:se-resize">se-resize</div>
      <div style = "cursor:sw-resize">sw-resize</div>
      <div style = "cursor:s-resize">s-resize</div>
      <div style = "cursor:w-resize">w-resize</div>
      
      <div style = "cursor:text">text</div>
      <div style = "cursor:wait">wait</div>
      <div style = "cursor:help">help</div>
   </body>
</html> 

it will produce following result. please mouse over the text.

Move the mouse over the words to see the cursor change:

Auto
Crosshair
Default
Pointer
Move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
Share post

Prajjwal Singh

Tech Blogger || Web developer || Computer Networking Enthusiast || Microsoft SQL Database Management Expert || Software Debugger || Learned DOS OS Structure

Leave a Reply