The "general" question....
If I have two HTML elements using z-index, one on top of the other, the bottom one becomes unclickable. The bottom one, however, is the main content. The top one is translucent and must be displayed over the bottom one.
... My specific problem....
I'm trying to develop a web app that can be controlled with a leap motion device.
I'm using an SVG over the top of a web page to display the user's fingertips as cursors (with the leap motion device). I need the SVG to display over the web page...but I need the webpage itself to be clickable, of course.
I guess what I'm asking is...is there a way to display the SVG on top (covering the entire page) but still make the page underneath it usable? I understand z-index is probably not the answer here, but I'm not sure what is. I've found similar problems here, but most of the solutions are "don't have one element displayed over the other."
I'm also fine with "use something else as a cursor" as an answer if there's a better way to do that, but I'm sure my specific problem isn't the only application for wanting a lower element to be the one with focus.
Here's a quick fiddle of the code below to demonstrate: http://jsfiddle.net/mmarkey/v5B9a/7/
<div class="bottom">
<ul>
<li><a href="google.com">A hyperlink to google</a>
</li>
<li><a href="amazon.com">A hyperlink to amazon</a>
</li>
<li><a href="yahoo.com">A hyperlink to yahoo</a>
</li>
<li><a href="facebook.com">A hyperlink to facebook</a>
</li>
<li><a href="bing.com">A hyperlink to bing</a>
</li>
</ul>
</div>
<svg class="top" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<circle cx="10" cy="25" r="10" fill="rgba(20,130,150,0.80)" />
<circle cx="45" cy="40" r="10" fill="rgba(20,130,150,0.80)" />
<circle cx="70" cy="50" r="10" fill="rgba(20,130,150,0.80)" />
<circle cx="100" cy="10" r="10" fill="rgba(20,130,150,0.80)" />
</svg>
.bottom {
background: #CCCCFF;
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
}
.top {
position: fixed;
z-index:10;
}
In css you can use pointer-events:none; to allow it to click through.
Not sure if it works in all browsers.