English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
CSS cursor properties are used to define the cursor type (i.e., mouse pointer) when the mouse is over a certain area or a link on a webpage.
Browsers typically display the mouse pointer over any blank part of a web page, a glove on any link or clickable item, and the editing cursor over any text or text field. Using CSS, you can redefine these properties to display various different cursors.
Browser1 {
cursor: move;
}
p {
cursor: text;
}Test and see‹/›The following demonstrates the different cursors most browsers will accept. Place the mouse pointer over the 'TEST' link in the output column to display the cursor.
| View | Value | Example | View |
|---|---|---|---|
| default | a:hover{cursor:default;} | Test | |
| pointer | a:hover{cursor:pointer;} | Test | |
| text | a:hover{cursor:text;} | Test | |
| wait | a:hover{cursor:wait;} | Test | |
| help | a:hover{cursor:help;} | Test | |
| progress | a:hover {cursor: progress;} | Test | |
| crosshair | a:hover {cursor: crosshair;} | Test | |
| move | a:hover {cursor: move;} | Test | |
| url() | a:hover {cursor: url("custom.cur"), default;} | Test |
ViewMore Cursors»
can also have a completely custom cursor.
cursor property handles a comma-separated list of user-defined cursor values followed byStandard Cursor. If the first cursor specified is incorrect or cannot be found, the next cursor in the comma-separated list will be used, and so on, until an available cursor is found.
If there is no valid user-defined cursor or it is not supported by the browser, the standard cursor at the end of the list will be used.
Tip:The standard format for cursors that can be used is the .cur format. However, you can use online free image converter software to convert images such as .jpg and .gif to .cur format.
a {
cursor: url("custom.gif"), url("custom.cur"), default;
}Test and see‹/›In the above example, custom.gif and custom.cur are custom cursor files uploaded to your server space, and default is the standard cursor. If the custom cursor is missing or the browser of the viewer does not support it, the standard cursor will be used.
Warning:If you want to declare a custom cursor, you must define one at the end of the listStandard CursorOtherwise, the custom cursor will not be displayed correctly.
This is a live demonstration of a custom cursor.
Note: IE9Supports only .cur static cursor and .ani animation cursor URLs in earlier versions. However, browsers like Firefox, Chrome, and Safari support .cur, .png, .gif, and .jpg, but not .ani.