Quick Links
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: