CSS Cursors
The cursor property in CSS defines how the mouse pointer should look when it hovers over an element.
This property is often used along with the :hover pseudo-class to make elements stand out and improve the user experience.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Hover & Cursor</title>
<style>
h1 {
font-size: 20px;
color: royalblue;
}
div {
background-color: violet;
}
</style>
</head>
<body>
<h1>CSS tutorials with CodeWithHarry</h1>
<div style="cursor:pointer">Pointer</div>
<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: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:w-resize">w-resize</div>
<div style="cursor:s-resize">s-resize</div>
<div style="cursor:wait">wait</div>
<div style="cursor:text">text</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>Try running this code in your editor, and hover over each line. The mouse cursor will change depending on the value provided. The names of the properties are self-explanatory to tell you what output you would be getting.
Output:
Custom Cursor
Besides the predefined cursors, CSS also allows you to use a custom cursor image.
Syntax:
.selector {
cursor: url('custom-cursor.png'), auto;
}The auto keyword ensures that the browser falls back to the default cursor when the custom cursor fails to load.
Quick Recap
- cursor changes how the mouse pointer looks on hover.
- Dozens of predefined cursor types are available (pointer, wait, help, zoom-in, etc.).
- You can even use custom images as cursors for a unique user experience.