How to change the mouse cursor shape with CSS? (Example demonstration)

I believe that when you browse major websites, you will have different experiences through different mouse styles. This article will show you how to change the shape of the mouse through CSS? css cursor attribute has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Effect Display

The cursor attribute specifies the type (shape) of the cursor to be displayed. This property defines the cursor shape used when the mouse pointer is placed within the bounds of an element. All major browsers support the cursor attribute.

Below we will give you a detailed introduction one by one through the specific css cursor example code of the mouse cursor shape change:

html code: define container

<div class="content">
			<div class="box box1"><a href="">CSS鼠标手型效果</a></div>
			<div class="box box2"><a href="">CSS鼠标手型效果</a></div>
			<div class="box box3"><a href="">CSS鼠标十字型效果</a></div>
			<div class="box box4"><a href="">CSS鼠标问号效果</a></div>
			<div class="box box5"><a href="">CSS鼠标等待效果</a></div>
		</div>

cursor The hand attribute allows the mouse to display the hand effect

.box1 a{
				background-color: red;
				cursor:hand;
			}

The pointer attribute of cursor also allows the mouse to display the hand effect, but it is compatible with multiple browsers. This is recommended

.box2 a{
				background-color: #DBDBDB;
				cursor:pointer;
			}

The crosshair attribute of cursor allows the mouse to display a cross-shaped effect.

.box3 a{
				background-color:#777777;
				cursor:crosshair;
			}

The help attribute of cursor allows the mouse to display a question mark effect.

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

The wait attribute of cursor allows the mouse to display a waiting effect. This is a A loading effect

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

cursor In addition to the above mouse cursor shape effects, there are also cursor effects that indicate different arrow directions: e-resize (arrow to the right), ne-resize (arrow to the right), n -resize (up arrow), nw-resize (up left arrow), w-resize (left arrow), sw-resize (down left arrow), s-resize (down arrow), se-resize (arrow pointing down to the right).

##

The above is the detailed content of How to change the mouse cursor shape with CSS? (Example demonstration). For more information, please follow other related articles on the PHP Chinese website!