/    /  CSS Cursor

CSS Cursor

 

CSS Cursor is used to specifies the type of mouse cursor when the mouse pointer is on the element. It allows us to specify the CSS cursor type, which will be displayed to the user.

 

Property values of the cursor:

 

alias – Indication of the cursor of something that is to be created.

auto – Property in which the browser sets the cursor.

all-scroll –        It indicates the scrolling.

col-resize – Column can be horizontally resized.

cell – Cell or the collection of cells is selected.

context-menu –  Availability of the context menu.

default – Which is the default cursor.

copy – It indicates that something is copied.

crosshair – Changes to the crosshair or the plus sign.

e-resize( east direction ) – Edge of the box is to be shifted towards right.

ew-resize(east/west direction ) – It indicates a bidirectional resize cursor.

n-resize( north direction)  – The edge of the box is to be shifted to up.

ne-resize(north/east direction) – The edge of the box is to be shifted towards up and right.

move –  It indicates that something is to be shifted.

help –  Which represents that help is available.

None – No cursor is rendered for the element.

No-drop – Dragged item cannot be dropped here.  

s-resize – It indicates the south direction.     

Row-resize      – It indicate that the row can be vertically resized.

Se-resize(south/east direction) – It indicates that an edge box is to be moved down and right.

Sw-resize(south/west direction) – Edge of the box is to be shifted towards down and left.

Wait – It represents an hourglass.

<url>   – Source of the cursor image file.

w-resize(west direction) – Represents that the edge of the box is to be shifted left.

Zoom-in          – It indicate that something can be zoomed in.

Zoom-out       – It indicate that something can be zoomed out.

 

Example:

 

<html>
 <head>
 </head>
 <style>
   body{
    background-color: lightblue;
    color:green;
    text-align: center;
    font-size: 20px;
   }

 </style>

 <body>
  <p>mouse over the below words for the cursor change.</p>
  <div style = "cursor:alias">alias Value</div>     
  <div style = "cursor:auto">auto Value</div>
  <div style = "cursor:all-scroll">all-scroll value</div>
  <div style = "cursor:col-resize">col-resize value</div>
  <div style = "cursor:crosshair">Crosshair</div>
  <div style = "cursor:default">Default value</div>
  <div style = "cursor:copy">copy value</div>
  <div style = "cursor:pointer">Pointer</div>
  <div style = "cursor:move">Move</div>
  <div style = "cursor:e-resize">e-resize</div>
  <div style = "cursor:ew-resize">ew-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>
  <div style = "cursor:progress">Progress</div>
  <div style = "cursor:no-drop">no-drop</div>
  <div style = "cursor:not-allowed">not-allowed</div>
  <div style = "cursor:vertical-text">vertical-text</div>
  <div style = "cursor:zoom-in">Zoom-in</div>
  <div style = "cursor:zoom-out">Zoom-out</div>
 </body>
</html>

 

OUTPUT:

           

CSS Cursor