What is the use of the pointer-events attribute in css
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!
