Introduction to CSS Cursor
The CSS Cursor property is a property used to change the default cursor style. Basically, the default cursor is different in the browser of each Operating System. Therefore, to define a default cursor, this property is a great tool!
Possible cursor icon in CSS
The following are the few possible cursor properties which you can use in CSS to display the cursor icon:
- auto – the cursor automatically adjusts itself accordingly.
- default – This shows a default icon of the cursor.
- help – a small question mark with the default cursor.
- wait – this shows a round icon. To show the computer is processing, you should use this cursor icon.
- crosshair – a cross shaped icon.
- pointer – a hand icon normally appears when you hover your mouse over text or a link.
- text – this icon represents selecting text. It looks “I” shaped.
Auto Cursor icon
defualt Cursor icon
Wait Cursor icon
Crosshair Cursor icon
Pointer Cursor icon
Text Cursor icon
[tooltip]Move your mouse over the text, and you’ll see the results.[/tooltip]
Cursor on Images
In addition to text, you can also place a cursor over an image. Here’s a demonstration:
List of Cursor properties
Above are a few possible properties, here’s the complete List of CSS Cursor Properties.
- CSS Cursor property is used to change the default cursor style.
- You can change the cursor style of image as well.