CSS Tutorials

Cursor In CSS
Previous Home Next

The cursor property of CSS allows you to specify the type of cursor that should be displayed to the user. One good usage of this property is in using images for submit buttons on forms. By default, when a cursor hovers over a link, the cursor changed from a pointer to a hand. For a submit button on a form this does not happen. Therefore, using the cursor property to change the cursor to a hand whenever someone hovers over an image that is a submit button. This provides a visual clue that they can click it.

  1. Auto: Shape of the cursor depends on the context area it is over. For example an I over text, a hand over a link, and so on...
  2. .auto{
    cursor:auto;
    }
    
  3. crosshair: A crosshair or plus sign
  4. .croshair{
    cursor:crosshair;
    }
    
  5. default: An arrow.
  6. .default{
    cursor:default;
    }
    
  7. pointer: A pointing hand.
  8. .pointer{
    cursor:pointer;
    }
    
  9. Move: The I bar
  10. .move{
    cursor:move;
    }
    
  11. E-resize: The cursor indicates that an edge of a box is to be moved right (east)
  12. .e-resize{
    cursor:e-resize;
    }
    
  13. ne-resize: The cursor indicates that an edge of a box is to be moved up and right (north/east).
  14. .ne-resize{
    cursor:ne-resize;
    }
    
  15. nw-resize: The cursor indicates that an edge of a box is to be moved up and left (north/west).
  16. .nw-resize{
    cursor:nw-resize;
    }
    
  17. n-resize: The cursor indicates that an edge of a box is to be moved up (north).
  18. .n-resize{
    cursor:n-resize;
    }
    
  19. se-resize: The cursor indicates that an edge of a box is to be moved down and right (south/east).
  20. .se-resize{
    cursor:se-resize;
    }
    
  21. sw-resize: The cursor indicates that an edge of a box is to be moved down and left (south/west).
  22. .sw-resize{
    cursor:sw-resize;
    }
    
  23. s-resize: The cursor indicates that an edge of a box is to be moved down (south).
  24. .s-resize{
    cursor:s-resize;
    }
    
  25. w-resize: The cursor indicates that an edge of a box is to be moved left (west).
  26. .w-resize{
    cursor:w-resize;
    }
    
  27. Text: The I bar
  28. .text{
    cursor:text;
    }
    

     

  29. Wait: An hour glass
  30. .wait{
    cursor:wait;
    }
    
  31. Help: A question mark or balloon, ideal for use over help buttons.
  32. .help{
    cursor:help;
    }
    
Simple Example Of Cursor
<html>
<head>
<style>
.croshair{
cursor:crosshair;
}
.default{
cursor:default;
}
.auto{
cursor:auto;
}
.e-resize{
cursor:e-resize;
}
.help{
cursor:help;
}
.inherit{
cursor:inherit;
}
.move{
cursor:move;
}
.ne-resize{
cursor:ne-resize;
}
.n-resize{
cursor:n-resize;
}
.nw-resize{
cursor:nw-resize;
}
.pointer{
cursor:pointer;
}
.se-resize{
cursor:se-resize;
}
.s-resize{
cursor:s-resize;
}
.sw-resize{
cursor:sw-resize;
}
.text{
cursor:text;
}
.wait{
cursor:wait;
}
.w-resize{
cursor:w-resize;
}
</style>
</head>
<body>
<p>This is display a different types of cursor properties</p>
<p class="croshair">Crosshair</p>
<p class="default">Default</p>
<p class="auto">Auto</p>
<p class="e-resize">E-resize</p>
<p class="help">Help</p>
<p class="inherit">Inherit</p>
<p class="move">Move</p>
<p class="ne-resize">Ne-resize</p>
<p class="n-resize">N-resize</p>
<p class="nw-resize">Nw-resize</p>
<p class="pointer">Pointer</p>
<p class="se-resize">Se-resize</p>
<p class="s-resize">S-resize</p>
<p class="sw-resize">Sw-resize</p>
<p class="text">Text</p>
<p class="wait">Wait</p>
<p class="w-resize">W-resize</p>
</body>
</html>

Output

Previous Home Next

Tolal:0 Click:

Show All Comments

Did not find what you were looking for leave your name and message. We will revert within 24 hours
Name:
eMail:
Comment / Feedback: