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

This article mainly shows you the "what is the use of pointer-events attributes in css", the content is simple and clear, and I hope it can help you solve your doubts, so let me lead you to study and learn "what is the use of pointer-events attributes in css" this article.

First, let's look at the role of the pointer-events attribute:

When you use the pointer-events attribute on a HTML element, it can specify whether the element can respond to mouse (or touch) events. It can be used to prevent clicks, states (CSS activity, focus, and hover states), and cursor operations (for example, displaying a pointer cursor on a link).

You can make the element respond to a pointer event (auto), or block it from performing this operation (none). If you prevent it from responding to pointer events, the elements below it will be targeted for those events. If you click the element, the element below it receives the click (click) event. It also applies to hovering and other cursor operations. For example, you can choose to set the text in the element below to pointer-events:none (see the example below).

The pointer-events attribute is very useful in different scenarios. One advantage of this property is that it allows you to use pointer-events:none to create scrolls of 60fps.

We can use (override) to disable the pointer event of an element on a child element: if an element has a pointer-events:auto on its child element (that is, enabled), it will be able to handle and respond to a click (click) event even if its parent element does not.

Let's look at an example of the pointer-events property:

In the example, the overlay element is located on the entire page, and the overlay layer sets the pointer-events:none, so you can select the text and click the anchor tag below it. Also notice how the cursor changes to a pointer (palm shape) when you hover over the link, because hovering triggers them.

HTML Code:

Overburden layer

Pointer-Events demo

Pointer-Events demo, pointer demo, Pointer-Events demo, pointer demo. Pointer-Events demonstration, Pointer-Events demonstration.

Pointer-Events demo, Pointer-Events demo, Pointer-Events demo!

Css Code:

.container {

Margin:40pxauto

Width:510px

Background-color:white

Padding:2em

Font-size:20px

}

.overlay {

Position:fixed

Top:0

Left:0

Width:100%

Height:100%

Background-color:rgba (0pd0re0j0pl 0.25g)

Z-index:1

Color:white

Text-align:center

Pointer-events:none

}

.overlayh2 {

Font-size:80px

Line-height:4

}

The above is all the content of the article "what is the use of pointer-events attributes in css". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to 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.