How to set the cursor attribute of css

Many friends are not very clear about the cursorpropertyof CSS. Today we will introduce to you the cursor property, its syntax and a short example to help you understand the cursor property.

When we layout DIV CSS, we will encounter the control of the mouse pointer cursor within the object, such as the mouse passing through the pointer and changing into a finger shape. Next, we introduce the mouse pointer style cursor control. In addition to the system default mouse pointer style, picture can be set as the mouse pointer through CSS. It is common for some websites to have various small picture styles for the mouse pointer. Of course, this is to set the mouse style through css cursor.

cursor syntax:

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)

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 } movement selection effect

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

5), div{ cursor:url(url picture address) }Set the object to the picture

Mouse pointer description

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

Layout structure

p { cursor: text; } /* cssComment: Set the mouse to change to text selection style when the mouse moves to the html p object*/

a { cursor: pointer; } /* css comment: Set the mouse to change into a finger shape when the mouse moves to ahyperlink object (link selection) */

body { cursor : url("small picture address")} /* Set the mouse pointer to a small picture by default*/

Extended reading: css a, css a link, a hover, css hyperlink style

Mouse pointer style summary

Mouse pointer style control settings are relatively common. For example, when we layout DIV+CSS daily, we hope that when the mouse points to a local span tag object, the mouse pointer cursor will change to a finger. status, at this time we just set cursor: pointer on the object span. Our illustration above shows the commonly used mouse cursor shapes and CSS words. We hope that you can choose to set the mouse pointer style when you layout. It should be noted that you must not abuse the cursor, and do not easily set a custom image as a mouse style. This will make the web page complicated and inconsistent with the user experience. Remember to use the cursor with caution.

I believe that after our introduction, everyone will have a deeper understanding of the cursor attribute. For more exciting content, please pay attention to other related articles on the php Chinese website!

Related reading:

What is the relationship between the div floating layer and the default div layer

How to know what CSS attribute style is set for DIV?

How to know whether the browser supports html5

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