Shulou(Shulou.com)06/03 Report--

This article introduces the knowledge of "cursor attribute instance usage in CSS". Many people will encounter this dilemma in the operation of actual cases, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

I. opening remarks

The domain scope of CSS3 has infiltrated the cursor attribute (mouse hand). This paper briefly introduces two quite practical combinations zoom-in/zoom-out and grab/grabbing.

This article focuses on showing and broadening our horizons.

II. Zoom-in/zoom-out combination

Zoom-in/zoom-out can change the mouse shape of an element to a "magnifying glass" or "magnifying glass". As follows:

Therefore, when we achieve a large image effect similar to that of Weibo, we do not need to create an additional .cur file by ourselves, but simply use the following CSS code:

CSS Code copies content to the clipboard

. zoom-in {

Cursor: zoom-in; / * Da Da * /

}

. zoom-out {

Cursor: zoom-out; / * small * /

}

You can click here: test demo with the zoom-in/zoom-out value of the cursor attribute

As a result, when you move the mouse over the imperial sister, a magnifying glass hand appears, as shown in the following screenshot (unimportant areas are whitewashed to save size):

Click to enlarge, and then click Zoom out.

Compatibility

At present, except for IE browsers (including IE11), other browsers on PC support zoom-in/zoom-out.

It seems that Safari also needs a private prefix.

III. Grab/grabbing combination

Grab/grabbing can change the mouse shape of the element to "salty pig hand" and "milk grabber", as follows (the hand is better in Chrome, FireFox browser):

This hand shape is perfect for dragging and moving content. Instead of creating an additional .cur file, you can simply use the following CSS code:

CSS Code copies content to the clipboard

.grab {/ * grab * /

Cursor:-webkit-grab

Cursor:-moz-grab

Cursor: grab

}

.grabbing {/ * grab * /

Cursor:-webkit-grabbing

Cursor:-moz-grabbing

Cursor: grabbing

}

You can click here: test demo with the grab/grabbing value of the cursor attribute

So, you can drag the rotten girl cartoon up and down to feel full of gay love.

Compatibility

At present, except for IE browsers (including IE11), other browsers on PC support grab/grabbing.

Now, however, these browsers also need to add private prefixes.

This is the end of the content of "cursor property instance usage in CSS". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.