Home > Developer > Web Develop
Recently discovered a CSS property called Pointer-events, is a JavaScript-related property, pointer-events literal translation as a pointer event , when the value is set to None, he has the following related characteristics.
A CSS can do a lot of things is not very magical, we are looking at the compatibility situation.
IE 11+
Firefox 3.6+
Chrome 4.0+
Safari 6.0
Opera 15.0
IOS Safari 6.0
Android Browser 2.1+
Android Chrome 18.0+
Look at the example, exactly what is going on. HTML code:
<! DOCTYPE html><Html><Head></Head><Body><Ul><li><a Span class= "hljs-attr" >href= "https://www.baidu.com/" > Baidu < /a></li> <li><a Span class= "hljs-attr" >href= "http://example.com" > One clickable link a></li> </ul></ Body></HTML> CSS code:
<style> a[href="http://example.com"] { pointer-events: none; }</style>
The second a tag cannot be clicked, and there is no mouse hand style. Let's look at an example.
HTML code:
<! DOCTYPE html><Html><Head></Head><body> <!--Div--<div class= "bottom" > <a href= " Www.baidu.com ">bottom-Baidu </a> </div> <!--Div---<< Span class= "Hljs-name" >div class= "top" > </div></ body></HTML> CSS code:
<style>.bottom { background: yellow; width: 100px; height: 100px;}.top { width: 100px; height: 100px; position: absolute; top: 0; left: 0;}</style>
At this point, because the top div is above the a tag, you cannot click on the a tag.
If we add a pointer-events property to the top layer above:
.top { pointer-events: none;}
We can go through the top layer to click on the following a tag, at this time the top layer if there is a color equivalent to see not touch (can not say haha).
Why this property is very practical, on many sites during the festival on the top of the page will be drawn with canvas rain, snowflakes, to avoid these suspended objects blocking the page to affect the mouse click, you can use the Pointer-events=none property, Let the canvas above do not obscure mouse events, allowing mouse events to penetrate the canvas above to click on the page. How is not very good, hurriedly write a demo to try.
"Go" CSS3 Super Practical Properties: Pointer-events
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
