Shulou(Shulou.com)06/01 Report--

This article is about how to change the style of the cursor in css. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

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

Syntax for the cursor attribute:

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

Possible attribute values:

● url: the URL of the custom cursor to use. Note: always define a normal cursor at the end of this list in case there is no available cursor defined by URL.

● default: default cursor (usually an arrow)

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

● crosshair: the cursor appears as a crosshair.

● pointer: the cursor appears as a pointer to the link (one hand)

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

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

● ne-resize: this cursor indicates that the edge of the rectangle can be moved up and right (north / east).

● nw-resize: this cursor indicates that the edge of the rectangle can be moved up and left (north / west).

● n-resize: this cursor indicates that the edge of the rectangle can be moved up (north).

● se-resize: this cursor indicates that the edge of the rectangle can be moved down and right (south / east).

● sw-resize: this cursor indicates that the edge of the rectangle can be moved down and left (south / west).

● s-resize: this cursor indicates that the edge of the rectangle can be moved down (north / west).

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

● text: this cursor indicates the text.

● wait: this cursor indicates that the program is busy (usually a table or hourglass).

● help: this cursor indicates the help available (usually a question mark or a balloon).

Cursorcursor description in common use

1. Div {cursor:default} default normal mouse pointer

2. Div {cursor:hand} and div {cursor:text} text selection effect

3. Div {cursor:move} Mobile selection effect

4. Div {cursor:pointer} finger shape link selection effect

5. Div {cursor:url (url Picture address)} sets the object to the picture

Mouse pointer description

Cursor sets or retrieves the system predefined cursor shape of the mouse pointer that moves over the object.

Control to set the mouse pointer style is more commonly used, but the cursor must not be abused, and do not easily set custom pictures as mouse styles. This will make the web page complex and inconsistent with the user experience, so remember to use the cursor with caution.

Thank you for reading! This is the end of this article on "how to change the cursor style in css". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it out for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.