10.1 The cursor Property
CSS lets you change the look of the cursor when hovering over elements using the cursor property. This gives you the chance to set different cursor types, making your web pages more interactive and visually appealing.
The cursor property defines what the mouse cursor looks like when it's over an element. Values can be either predefined or custom images.
Syntax:
element {
cursor: value;
}
Values:
The cursor property supports many values, which can be divided into predefined and custom.
Predefined values:
default: the default cursorpointer: a hand-like cursor, usually used for linkstext: a text cursor (I-shaped), usually for text fieldsmove: a moving cursorwait: an hourglass or waiting indicator cursorhelp: a question mark cursorcrosshair: a crosshair cursornot-allowed: a forbidden sign cursor (circle with a slash)grabandgrabbing: dragging cursors
Example of using predefined values:
.default-cursor {
cursor: default;
padding: 10px;
border: 1px solid black;
}
.pointer-cursor {
cursor: pointer;
padding: 10px;
border: 1px solid black;
}
.text-cursor {
cursor: text;
padding: 10px;
border: 1px solid black;
}
<div class="default-cursor">Default cursor</div>
<div class="pointer-cursor">Pointer cursor</div>
<div class="text-cursor">Text cursor</div>
10.2 Custom Values (Custom Cursors)
The cursor property also supports using custom images as cursors. You do this with the url value.
Syntax:
element {
cursor: url("custom-cursor.png"), fallback;
}
Where:
url('custom-cursor.png'): specifies the path to the cursor imagefallback: a predefined value used if the custom image can't be loaded
Example of using custom cursors:
.custom-cursor {
cursor: url('https://via.placeholder.com/32'), auto;
padding: 10px;
border: 1px solid black;
}
<body>
<div class="custom-cursor">Custom cursor</div>
</body>
Specifications and Limitations of Custom Cursors:
- Image formats: supports
.cur,.png,.jpg,.gifformats. - Image sizes: it's recommended to use 32x32 pixels or smaller for better performance and compatibility.
- Click point coordinates: You can set the click point (hotspot) coordinates in the cursor image. The default is the top-left corner (0,0).
10.3 Details of Using Custom Cursors
Image Formats
Custom cursors can be in various formats like PNG, GIF, JPG, and SVG. It's recommended to use formats with transparency support (like PNG) to ensure it looks right on any background.
Image Sizes
Cursor images shouldn't be too large. Recommended sizes are 32x32 pixels or smaller. Larger images might not display correctly in some browsers.
Specifying Focus Coordinates
You can specify the focus (hotspot) coordinates of the cursor using additional values after the image URL.
Syntax
element {
cursor: url("custom-cursor.png") x y, fallback;
}
Where:
xandy: focus coordinates relative to the top-left corner of the image.
Example of using focus coordinates:
.custom-cursor-focus {
cursor: url('https://via.placeholder.com/32') 16 16, auto;
padding: 10px;
border: 1px solid black;
}
<body>
<div class="custom-cursor-focus">Custom cursor with focus</div>
</body>
Explanation of the Code:
.custom-cursor-focus: sets a custom cursor with focus coordinates (16, 16), making the center of the image the hot spot
Practical Use:
- Improving UI/UX: using custom cursors can greatly enhance the user interface, making it more intuitive and aesthetically pleasing.
- Interactive Elements: custom cursors can be applied to interactive elements like buttons, links, icons, etc.
- Games and Applications: in games and web apps, custom cursors help create a unique style and atmosphere.
GO TO FULL VERSION