CSS Cursor

Cursor in CSS

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:      

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

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

3. all-scroll : It indicates the scrolling.

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

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

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

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

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

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

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

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

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

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

14. move : It indicates that something is to be shifted.

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

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

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

Let’s understand Some of the other property values of the Cursor:      

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

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

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

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

5. Wait : It represents an hourglass.

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

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

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

9. 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>

Recommended Posts:

Spread the love

Leave a Comment

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