How does CSS make the mouse cursor shape change? (Example Demo)

I believe that when you browse the major websites, the different styles of the mouse will bring different experience feelings. This article will bring you through the CSS how to achieve the change of the mouse shape? CSS cursor Properties, there is a certain reference value, the need for friends can refer to, I hope to help you.

Effect Show

The cursor property specifies the type (shape) of cursors to display. This property defines the cursor shape that is used when the mouse pointer is placed within the bounds of an element. Cursor properties are supported by all major browsers.

Below we pass the specific CSS cursor mouse cursor shape Changes the instance code, gives everybody detailed introduction:

HTML code: Defining containers

<div class= "Content" ><div class= "box box1" ><a href= "" >css Mouse Hand effect </a></div><div class= "Box Box2" ><a href= "" >css mouse Hand effect </a></div><div class= "box box3" ><a href= "" > CSS Mouse cross-effect </a></div><div class= "box box4" ><a href= "" >css mouse question mark effect </a></div>< div class= "box box5" ><a href= "" >css Mouse Wait effect </a></div></div>

The cursor's hand property is to let the mouse display the hand shape effect

. Box1 A{background-color:red;cursor:hand;}

The cursor's Pointer property also allows the mouse to display hand-shaped effects, but can be compatible with a variety of browsers, recommending this

. Box2 A{background-color: #DBDBDB; cursor:pointer;}

The cursor's Crosshair property is to let the mouse display a cross-shaped effect

. Box3 A{background-color: #777777; cursor:crosshair;}

The Help property of the cursor is to let the mouse display the question mark type effect

. box4 A{background-color: #E6E6E6; cursor:help;}

The wait property of the cursor is to let the mouse display the wait effect, which is a loading effect

Background-color: #2DC4CB; cursor:wait;}

Cursor In addition to the mouse cursor shape effect above, there are different arrows pointing to the effect of the pointer: E-resize (arrow to the right), Ne-resize (arrow on the right), n-resize (arrow up), Nw-resize (arrow to the left), W Resize (left arrow), Sw-resize (lower left Arrow), S-resize (arrow down), Se-resize (arrow to the right).

Above, introduced the CSS how to implement the mouse cursor shape changes related usage, hoped to be helpful to you! Read more about PHP in other related articles!