How to set the cursor property of CSS

Many friends do not know how to set the cursor property of CSS, today we will introduce you to the cursor property, as well as his syntax and a small, to help you understand the cursor property.

We are in the div CSS layout, we will encounter the object within the mouse pointer cursor control, such as the mouse pointer changes to the shape of the finger style, next we introduce the mouse pointer style cursor control. The system default mouse pointer style outside, you can set the picture through the CSS mouse pointer, common some Web site mouse pointer is a variety of small picture style, of course this is the mouse style through CSS cursor settings.

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)

Common 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 object as Picture

Mouse pointer description

The cursor sets or retrieves the system-predefined cursor shape that is moved on the object by the mouse pointer.

Layout structure

p {cursor:text;}/* CSS comment: Mouse changes to text selection style when mouse moves to HTML p object */

a {cursor:pointer;}/* CSS comment: Mouse changes to finger shape when mouse moves to a Hyperlink 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 more commonly used, such as daily we in the div+css layout, we want the mouse pointer to a local span tag object, the mouse cursor becomes the finger state, this time we set the object span Cursor:pointer can be. Above we show the common mouse cursor shape and CSS words, want to layout time more oneself need to choose to set the mouse pointer style. Note that the cursor should not be abused, and do not easily set a custom picture for the mouse style this will make the Web page complex and does not conform to the user experience feel, remember the cursor with caution.

I believe that after our introduction, we also have a deeper understanding of the cursor attributes. More exciting please focus on the PHP Chinese web other related articles!

Related reading:

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

How do I know what CSS property style the div sets?

How to know browser support does not support HTML5