Example of CSS Cursor Property

CSSWeb DevelopmentFront End Technology

With CSS cursor property, you can show a crosshair or plus sign, pointer, etc. You can try to run the following code to implement cursor property in CSS −

Example

<html>
   <head>
   </head>
   <body>
      <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>

We added the below values above −

Value
Description
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.
crosshair
A crosshair or plus sign
default
An arrow
pointer
A pointing hand (in IE 4 this value is hand).
move
The 'I' bar
e-resize
The cursor indicates that an edge of a box is to be moved right (east).
ne-resize
The cursor indicates that an edge of a box is 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 moved up (north).
se-resize

The cursor indicates that an edge of a box is to be moved down and right (south/east).
sw-resize
The cursor indicates that an edge of a box is to be moved down and left (south/west).
s-resize
The cursor indicates that an edge of a box is to be moved down (south).
w-resize
The cursor indicates that an edge of a box is to be moved left (west).
text
The I bar.
wait
An hour glass.
help
A question mark or balloon, ideal for use over help buttons.
<url>
The source of a cursor image file.
raja
Updated on 25-Jun-2020 08:51:40

Advertisements