CSS Cursor

CSS allows you to set your desired cursor style when you mouse over an element.

Let’s understand the property values of the                 

Cursor:      

alias : It is used to display the indication of the cursor of something that is to be created

auto:  It is the default property in which the browser sets the cursor.

all-scroll : It indicates the scrolling.

col-resize : Using it, the cursor will represent that the column can be horizontally resized.

cell : The cursor will represent that a cell or the collection of cells is selected.

context-menu : It indicates the availability of the context menu.

default : It indicates an arrow, which is the default cursor.

copy : It is used to indicate that something is copied.

crosshair : In it, the cursor changes to the crosshair or the plus sign.

e-resize : It represents the east direction and indicates that the edge of the box is to be shifted towards right.

ew-resize : It represents the east/west direction and indicates a bidirectional resize cursor.

n-resize : It represents the north direction that indicates that the edge of the box is to be shifted to up.

ne-resize : It represents the north/east direction and indicates that the edge of the box is to be shifted towards up and right.

move : It indicates that something is to be shifted.

help : It is in the form of a question mark or ballon, which represents that help is available.

None : It is used to indicate that no cursor is rendered for the element.

No-drop : It is used to represent that the dragged item cannot be dropped here.

s-resize : It indicates an edge box is to be moved down. It indicates the south direction.

Row-resize : It is used to indicate that the row can be vertically resized.

Se-resize : It represents the south/east direction, which indicates that an edge box is to be moved down and right.

Sw-resize : It represents south/west direction and indicates that an edge of the box is to be shifted towards down and left.

Wait : It represents an hourglass.

<url> : It indicates the source of the cursor image file.

w-resize : It indicates the west direction and represents that the edge of the box is to be shifted left.

Zoom-in : It is used to indicate that something can be zoomed in.

Zoom-out : It is used to indicate that something can be zoomed out.

The illustration of using the above values of cursor property is given below:

Example:

<html

   <head>

   </head>

   <style>

      body{

         background-color: lightblue;

         color:green;

         text-align: center;

         font-size: 20px;

      }

   </style>

   <body>

      <p>Move your 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>

Spread the love

Leave a Comment

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