在另一个元素上显示,而不会失去单击下部元素的能力

Question

"一般"问题......

如果我有两个使用z-index的HTML元素,一个在另一个的顶部,则底部的一个变得不可点击.然而,最底层的是主要内容.顶部是半透明的,必须显示在底部.

......我的具体问题....

我正在尝试开发一个可以通过跳跃运动设备控制的Web应用程序.

我在网页顶部使用SVG将用户的指尖显示为光标(使用跳跃运动设备).我需要SVG在网页上显示......但我需要网页本身是可点击的,当然.

我想我要问的是......有没有办法在顶部显示SVG(覆盖整个页面),但仍然使其下面的页面可用？我理解z-index可能不是这里的答案,但我不确定是什么.我在这里发现了类似的问题,但大多数解决方案都是"没有一个元素显示在另一个元素上".

如果有一个更好的方法可以做到这一点,我也可以使用"将其他东西作为光标"作为答案,但我确定我的具体问题并不是唯一一个希望较低元素成为那个元素的应用程序焦点.

以下是代码的快速提示: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;
}

Answer 1

在css中,您可以使用pointer-events:none;它来点击.不确定它是否适用于所有浏览器.

http://jsfiddle.net/v5B9a/9/