Click through “overlay”

问题

Imagine this situation where I have:

This HTML

<div class="overlay"></div>

<div class="content">
    <a href="">CAN THIS BE CLICKABLE IN ANY WAY? </a>
</div>

and this CSS

.content {position: relative; width: 100%; height: 100%; z-index:1; padding: 40px;}
.overlay {position: fixed; width: 100%; height: 100%; z-index:2; background-color: rgba(0,0,0,.1);}

Is there a way to make the div that is indexed behind the overlay "clickable" preferably without JavaScript?

Reason for this is that, I'd like to have an effect that covers the whole page but still permits the navigation and usage of content underneath.

Am I missing something, is there a way around... or is this not possible?

Thank you in advance.

FIDDLE STARTUP

SOLUTION: Check Bellow Please.

Addind this to inform that the solution has the following compatibility.

Chrome - iOS - Android: Yep
Safari: 4.0+
Firefox: 3.6+
Opera: 15.0+
IE: 9+

回答1:

You just need to add pointer-events: none; to .overlay

See http://jsfiddle.net/iamnotsam/DV49T/1/ uses SVG for IE9 and IE10 compatibility

For IE 10, there is only partial support for pointer-events: none, specifically the element must be an svg. The above fiddle has been verified on one machine as making IE9 and IE10 happy. Thanks OP for testing.

回答2:

This is an example that i think will help you. If you want the link to just be something to activate another element then use #Something to your link. http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_target

something:target
{}

Here is the lesson http://www.w3schools.com/cssref/css_selectors.asp

Here is yours updated http://jsfiddle.net/DrewGoldsberry/5tGC7/1/

This isnt working on jsfiddle but you can test at w3schools

来源：https://stackoverflow.com/questions/23025454/click-through-overlay

标签

html

css

overlay