CSS Cursor
It is used to define the type of mouse cursor when the mouse pointer is on the element. It allows us to specify the cursor type, which will be displayed to the user.
When a user hovers on the link, then by default, the cursor transforms into the hand from a pointer.
The browser typically display the mouse pointer over any blank part of a web page, the gloved hand over any linked or clickable item and the edit cursor over any text or text field. With CSS we can modify those properties to display a variety of different cursors.
Input:-
Output:-
The table below demonstrates the different cursors that most browsers will accept:-
|
Look |
Values |
Example |
|
|
default |
a:hover{cursor:default;} |
|
|
pointer |
a:hover{cursor:pointer;} |
|
|
text |
a:hover{cursor:text;} |
|
|
wait |
a:hover{cursor:wait;} |
|
|
help |
a:hover{cursor:help;} |
|
|
progress |
a:hover{cursor:progress;} |
|
|
crosshair |
a:hover{cursor:crosshair;} |
|
|
move |
a:hover{cursor:move;} |
|
|
url() |
a:hover{cursor:url("custom.cur"), default;} |
Creating a Customized Cursor
It is also possible to have completely customized cursors.
The cursor property handles a comma-separated list of user-defined cursors values followed by the generic cursor. If the first cursor is specified incorrectly, the next cursor in the comma-separated list will be used, and so on until a usable cursor is found.
If none of the user-defined cursors is valid or supported by the browser, the generic cursor at the end of the list will be used instead.
Input:-
Output:-
In the above example custom.gif and custom.cur is the custom cursor file, uploaded to our server space, and default is the generic cursor that will be used if the custom cursor is missing, or isn't supported by the viewer's browser.
Note: IE9 and earlier versions only support URL values of the type .cur for static cursor, and .ani for animated cursor. However, browsers such as Firefox, Chrome and Safari have support for .cur, .png, .gif and .jpg but not .ani.
