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>