3

“一般”问题......

如果我有两个使用 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;
}
4

2 回答 2

5

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

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

于 2013-07-24T22:58:17.537 回答
0

在此处查看类似的问题：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();

希望这有帮助

于 2013-07-25T07:29:43.097 回答