CSS cursor mouse pointer cursor style default pointer hand URL

CSS cursor mouse pointer mouse cursor style tutorial

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. System default mouse pointer style outside, body sense music can be set by CSS image for mouse pointer, some site mouse pointer is a variety of small picture style, of course, this is the mouse style through CSS cursor settings.

Extended reading: CSS pointers
First, cursor syntax and structure-TOP

1. 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

2. Cursor Style

Cursor mouse cursor pointer style diagram
CSS cursor mouse cursor pointer style diagram

3, Body Sense music mouse pointer description
The cursor sets or retrieves the system-predefined cursor shape that is moved on the object by the mouse pointer.

4. Layout structure
p {cursor:text;}/* CSS comment: Body music set Mouse to text selection style when moving the cursor to an 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
Second, the mouse pointer style summary-TOP

mouse pointer style control settings are more commonly used, body sense music such as everyday 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.