html - 在不失去点击下方元素的能力的情况下将一个元素显示在另一个元素之上

Question

“一般”问题....

如果我有两个使用 z-index 的 HTML 元素，一个在另一个之上，底部的元素将变得不可点击。然而，最下面的是主要内容。上面的是半透明的，必须显示在下面的上面。

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

我正在尝试开发一个可以用跳跃运动设备控制的网络应用程序。

我在网页顶部使用 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/