In this tutorial you will learn about the CSS Cursors and its application with practical example.
When using computer we have seen many different style for mouse cursor icons. A normal mouse cursor icon looks like a “I” symbol or a skewed arrow when selecting text. CSS Cursors property enables us to change the type of cursor to be displayed when pointing on an element.
Table Of Contents−
Here is the list of available cursor style –
| CSS Cursor Value | Result |
|---|---|
| crosshair |
Mouse cursor is set to crosshair
|
| pointer |
Mouse cursor is set to pointer
|
| text |
Mouse cursor is set to text
|
| move |
Mouse cursor is set to move
|
| wait |
Mouse cursor is set to wait
|
| help |
Mouse cursor is set to help
|
| progress |
Mouse cursor is set to progress
|
| not-allowed |
Mouse cursor is set to not-allowed
|
| no-drop |
Mouse cursor is set to no-drop
|
| no-vertical-text |
Mouse cursor is set to no-vertical-text
|
| all-scroll |
Mouse cursor is set to all-scroll
|
| col-resize |
Mouse cursor is set to col-resize
|
| row-resize |
Mouse cursor is set to row-resize
|
| e-resize |
Mouse cursor is set to e-resize
|
| ne-resize |
Mouse cursor is set to ne-resize
|
| n-resize |
Mouse cursor is set to n-resize
|
| nw-resize |
Mouse cursor is set to nw-resize
|
| w-resize |
Mouse cursor is set to w-resize
|
| sw-resize |
Mouse cursor is set to sw-resize
|
| s-resize |
Mouse cursor is set to s-resize
|
| se-resize |
Mouse cursor is set to se-resize
|
