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

This article mainly introduces "what are the pointer mouse types of css". In daily operation, I believe many people have doubts about which pointer mouse types of css. The editor consulted all kinds of information and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the questions of "what css pointer mouse types"! Next, please follow the editor to study!

Have you ever had the experience of putting one element on top of another and wanting the following element to be clickable? Now, you can do this using the pointer-events property of css.

CSS pointer-events

Pointer-events originally originated from SVG and has been reflected in many browsers. However, it takes a little bit of css for any HTML element to work. This property is called pointer-events, and it can basically be set to auto, which is normal behavior, and "none" is an interesting property.

Apply it to an element

If you have set the css attribute of an element to pointer-events: none. It will not catch any click events, but will let the events pass through the element to the following elements, like this:

The code is as follows:

.overlay {

Pointer-events: none

}

Browser support

So far, Firefox 3.6 +, Safari 4, and Google Chrome support Pointer-events. I think Opera and IE will definitely catch up as soon as possible. I don't know if they support it in their plan.

Small demo

I put together the demonstration of Pointer-events behavior, where you can test it yourself. As you can see, the gray box on the right prevents you from clicking the link below. However, if you click checkbox to disable Pointer-events. The click event linked below will be triggered.

The complete code for the demo page is as follows:

The code is as follows:

CSS pointer events

.container {

Position: relative

Width: 370px

Font: 15px Verdana, sans-serif

Margin: 10px auto

}

.overlay {

Position: absolute

Right: 0px

Top: 0

Width: 40px

Height: 40px

Background: rgba (0,0,0,0.5)

}

.clients-events-none {

Pointer-events: none

}

_ window.onload = function () {

Document.getElementById ("enable-disable-pointer-events"). Onclick = function () {

Document.getElementById ("overlay"). ClassName = "overlay" + ((this.checked)? "pointer-events-none": ")

}

}

Twitter, Twitter

Disable pointer events for grey box

A practical example

If you go to the start page of Twitter (you don't seem to be able to log in to the site in China, as shown below), and you're not logged in. You will see a lot of tabs listed at the bottom. In an element on the right, there is a faded image covering it to produce this effect. Unfortunately, the link below cannot be clicked. If you add a line of code to css, it will be fine.

Now, if you need this effect, you have a very simple way.

The following is a specific introduction:

System default mouse pointer style, you can set pictures for the mouse pointer through CSS, it is common that some websites mouse pointer is a variety of small picture styles, of course, this is through the css cursor mouse style.

First, cursor grammar and structure-TOP1, cursor syntax:

Cursor: auto | crosshair | default | hand | move | help | wait | text | w-resize | s-resize | n-resize | ne-resize | sw-resize | se-resize | nw-resize | pointer | url (url)

Cursorcursor description in common use

1), div {cursor:default} default normal mouse pointer

2), div {cursor:hand} and div {cursor:text} text selection effect

3), div {cursor:move} Mobile selection effect

4), div {cursor:pointer} finger shape link selection effect

5), div {cursor:url (url Picture address)} set the object to the picture

2. Cursor style effect drawing

3. Mouse pointer description

Cursor sets or retrieves the system predefined cursor shape of the mouse pointer that moves over the object.

4. Layout structure

P {cursor: text;} / * css Note: set the mouse to change to a text selection style when the mouse moves over the html p object * /

A {cursor: pointer;} / * css Note: set the mouse to change to a finger shape when the mouse moves over a hyperlinked 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, CSSS hyperlink styles

II. Summary of mouse pointer style

TOP mouse pointer style control settings are more commonly used, for example, when we are in DIV+CSS layout, we want the mouse to point to a local span tag object, the mouse pointer cursor will become a finger state, at this time we can set cursor: pointer to the object span. The above illustration shows the commonly used mouse cursor shapes and css words. We hope that we need to choose to set the mouse pointer style when laying out. It should be noted that the cursor must not be abused, and do not easily set custom pictures as mouse styles. This will make the web page complex and inconsistent with the user experience, so remember to use the cursor with caution.

Example:CSS Mouse hand effect CSS Mouse hand effect

Example:CSS Mouse hand effect CSS Mouse hand effect

Note: pointer is also a small hand mouse, it is recommended that you use pointer, because it is compatible with a variety of browsers.

For specific usage, please refer to the following methods:

Example:CSS mouse is automatically given by the system. CSS mouse is automatically given by the system.

Example:CSS mouse cross effect CSS mouse cross effect

Example:CSS mouse I glyph effect CSS mouse I glyph effect

Example:CSS mouse waiting effect CSS mouse waiting effect

Example:CSS Mouse default effect CSS Mouse default effect

Example:CSS mouse right arrow effect CSS mouse right arrow effect

Example:CSS right up Arrow effect CSS Mouse up Arrow effect

Example:CSS mouse up arrow effect CSS mouse up arrow effect

Example:CSS Mouse up Arrow effect CSS Mouse up Arrow effect

Example:CSS mouse left arrow effect CSS mouse left arrow effect

Example:CSS Mouse sit Arrow effect CSS Mouse sit Arrow effect

Example:CSS Mouse Down Arrow effect CSS Mouse Down Arrow effect

At this point, the study on "what are the pointer mouse types of css" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.