Javatpoint Logo
Javatpoint Logo

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.

Let's understand the property values of the cursor.

Values Usage
alias It is used to display the indication of the cursor of something that is to be created.
auto It is the default property in which the browser sets the cursor.
all-scroll It indicates the scrolling.
col-resize Using it, the cursor will represent that the column can be horizontally resized.
cell The cursor will represent that a cell or the collection of cells is selected.
context-menu It indicates the availability of the context menu.
default It indicates an arrow, which is the default cursor.
copy It is used to indicate that something is copied.
crosshair In it, the cursor changes to the crosshair or the plus sign.
e-resize It represents the east direction and indicates that the edge of the box is to be shifted towards right.
ew-resize It represents the east/west direction and indicates a bidirectional resize cursor.
n-resize It represents the north direction that indicates that the edge of the box is to be shifted to up.
ne-resize It represents the north/east direction and indicates that the edge of the box is to be shifted towards up and right.
move It indicates that something is to be shifted.
help It is in the form of a question mark or ballon, which represents that help is available.
None It is used to indicate that no cursor is rendered for the element.
No-drop It is used to represent that the dragged item cannot be dropped here.
s-resize It indicates an edge box is to be moved down. It indicates the south direction.
Row-resize It is used to indicate that the row can be vertically resized.
Se-resize It represents the south/east direction, which indicates that an edge box is to be moved down and right.
Sw-resize It represents south/west direction and indicates that an edge of the box is to be shifted towards down and left.
Wait It represents an hourglass.
<url> It indicates the source of the cursor image file.
w-resize It indicates the west direction and represents that the edge of the box is to be shifted left.
Zoom-in It is used to indicate that something can be zoomed in.
Zoom-out It is used to indicate that something can be zoomed out.

The illustration of using the above values of cursor property is given below:

Example

Test it Now

Next TopicCSS Buttons




Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA