Has there ever been an experience of placing one element on another, and hoping that the element below will become clickable? Now, you can use the pointer-events attribute of css.
CSS pointer-events
Pointer-events was originally originated from SVG and has been reflected in many browsers. However, to make any HTML element take effect, you have to use a little bit of css. This attribute is called pointer-events and can be basically set to auto. This is a 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 capture any click event, but let the event pass through the element to reach the following element, like this:
<Style>
. Overlay {
Pointer-events: none;
}
</Style>
<Div id = "overlay" class = "overlay"> </div> browser support
So far, Firefox 3.6 +, Safari 4, and Google Chrome support Pointer-events. I think Opera and IE will catch up as soon as possible. I don't know if they support it in their plans.
Demo
I put the demonstration of Pointer-events behavior together, where you can test it by 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 for it. The click event of the link below will be triggered.
The complete code on the demo page is as follows:
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "GBK">
<Title> CSS pointer events-Liehuo.net of fire college </title>
<Style>
. 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 );
}
. Pointer-events-none {
Pointer-events: none;
}
</Style>
<Script>
Window. onload = function (){
Document. getElementById ("enable-disable-pointer-events"). onclick = function (){
Document. getElementById ("overlay"). className = "overlay" + (this. checked )? "Pointer-events-none ":"");
};
};
</Script>
</Head>
<Body>
<Div class = "container">
<A href = "http://bkjia.com"> Liehuo </a>, <a href = "http://bkjia.com"> Liehuo </a>, <a href = "http://bkjia.com"> Liehuo </a>, <a href = "http://bkjia.com"> Liehuo </a>, <a href = "http://bkjia.com"> Liehuo </a>, <a href = "http://bkjia.com"> Liehuo </a>, <a href = "http://bkjia.com"> Liehuo </a>, <a href = "http://bkjia.com"> Liehuo </a>, <a href = "http://bkjia.com"> Liehuo </a>, <a href = "http://bkjia.com"> Liehuo </a>, <a href = "http://bkjia.com"> Liehuo </a>, <a href = "http://bkjia.com"> Liehuo </a>, <a href = "http://bkjia.com"> Liehuo </a>, <a href = "http://bkjia.com"> Liehuo </a>,
<Div id = "overlay" class = "overlay"> </div>
<P>
<Input id = "enable-disable-pointer-events" type = "checkbox">
<Label for = "enable-disable-pointer-events"> Disable pointer events for gray box </label>
</P>
</Div>
</Body>
</Html>
Actual Example
If you enter the start page of Twitter (it seems that you cannot log on to this website in China, as shown in), and you are not logged on. At the bottom, you will see a lot of listed labels. On the right side of an element, a faded image overwrites it to produce this effect. Unfortunately, the following link cannot be clicked. If you add a line of code in css, you can.
Now, if you need this effect, you have a very simple method.
Address: http://robertnyman.com/2010/03/22/css-pointer-events-to-allow-clicks-on-underlying-elements/#respond
Reprint address: http://www.denisdeng.com /? P = 841
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
