Shulou(Shulou.com)05/31 Report--

Most people do not understand the knowledge points of this article "css3 how to achieve mouse hiding effect", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "css3 how to achieve mouse hiding effect" article.

In css, you can use the cursor attribute to achieve the mouse hiding effect, which is used to define the cursor shape when the mouse pointer is placed within the boundary of an element. When the attribute value is set to none, you can achieve the mouse hiding effect. The syntax is "element {cursor:none}".

The operating environment of this tutorial: windows10 system, CSS3&&HTML5 version, Dell G3 computer.

How to realize the Mouse hiding effect by css3

The cursor attribute defines the shape of the cursor used when the mouse pointer is placed within the boundary of an element

Common mouse styles are as follows:

The URL of the custom cursor that url needs to use. Note: always define a normal cursor at the end of this list in case there is no available cursor defined by URL.

Default default cursor (usually an arrow)

Auto defaults. The cursor set by the browser.

The crosshair cursor appears as a crosshair.

The pointer cursor appears as a pointer to the link (one hand)

Move this cursor indicates that an object can be moved.

E-resize this cursor indicates that the edge of the rectangle can be moved to the right (east).

Ne-resize this cursor indicates that the edge of the rectangle can be moved up and right (north / east).

Examples are as follows:

123 div {height:150px;width:150px;border:1px solid # 000;}

Move the mouse over the element and you can see that the mouse pointer changes:

Output result:

The above is about the content of this article on "how to achieve mouse hiding effect in css3". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.