How to change cursor style in css

In CSS, the cursor attribute is used to define the cursor shape used when the mouse pointer is placed within the boundary of an element; we can set the mouse cursor (pointer) style through the cursor attribute .

Syntax of the cursor attribute:

cursor: auto|crosshair|default|hand|move|help|wait|text|w-resize|s-resize|n-resize|e-resize|ne-resize|sw-resize|se-resize|nw-resize|pointer|url(url)

Possible attribute values:

● URL: The custom cursor to be used URL. Note: Always define a normal cursor at the end of this list, in case there is no cursor available defined by URL.

● default: The default cursor (usually an arrow)

● auto: Default. The cursor set by the browser.

● Crosshair: The cursor is rendered as crosshairs.

● Pointer: The cursor appears as a pointer (a hand) indicating a link

● move: This cursor indicates that an object can be moved.

●　e-resize: This cursor indicates that the edge of the rectangular box can be moved to the right (east).

● ne-resize: This cursor indicates that the edge of the rectangular box can be moved up and to the right (North/East).

●　nw-resize: This cursor indicates that the edge of the rectangular box can be moved up and to the left (north/west).

●　n-resize: This cursor indicates that the edge of the rectangular box can be moved upward (north).

●　se-resize: This cursor indicates that the edge of the rectangular box can be moved down and to the right (south/east).

●　sw-resize: This cursor indicates that the edge of the rectangular box can be moved down and to the left (south/west).

●　s-resize: This cursor indicates that the edge of the rectangular box can be moved downward (North/West).

●　w-resize: This cursor indicates that the edge of the rectangular box can be moved to the left (west).

● text: This cursor indicates text.

● Wait: This cursor indicates that the program is busy (usually a watch or hourglass).

● Help: This cursor indicates available help (usually a question mark or a balloon).

Commonly used cursor cursor description

1, div{ cursor:default }Default normal mouse pointer

2 , div{ cursor:hand } and div{ cursor:text } Text selection effect

3, div{ cursor:move } Move Selection effect

4, div{ cursor:pointer } Finger shape link selection effect

5, div{ cursor:url(url image address) }Set the object as a picture

cursor style rendering

##Mouse pointer description

cursor sets or retrieves the system predefined cursor shape used by the mouse pointer moving on the object.

It is common to control and set the mouse pointer style, but do not abuse the cursor, and do not easily set a custom image as the mouse style. This will make the web page complicated and inconsistent with the user experience. Remember to use the cursor with caution.

The above is the detailed content of How to change cursor style in css. For more information, please follow other related articles on the PHP Chinese website!