将一个元素显示在另一个元素之上，而不会失去单击下方元素的能力

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/

Answer 2

在此处查看类似问题：https://stackoverflow.com/a/17655894/2500474。

这是 IE 解决方法：

var x = event.pageX;
var y = event.pageY;
$('.cursor').hide();
var here = document.elementFromPoint(x, y);
$('.cursor').show();
// Do what you want with the element here
$(here).click();

希望有帮助