Question

我猜不是，但能用CSS或Javascript设置光标的z-index真的很棒。

假设您有一些按钮，并且您希望在按钮顶部添加半透明图像以实现效果。或者在我目前的情况下，一些具有悬停和点击操作的SVG路径。如果我可以将按钮或SVG z-index设置为0，我的光标z-index为1，图像覆盖z-index为2，那将非常可爱！鼠标将在叠加层下方，仍然可以单击按钮。设置视觉z-index（光标看起来是哪一层），与有效z-index（光标实际上是哪一层）分开将更加壮观。因此，光标可能看起来位于叠加层的顶部，但仍然可以单击下面的按钮。

我有疑虑，但我想我会检查是否有人听说有人这样做或类似的东西。

Answer 1

您可以使用光标：none;

查看相关问：Is it possible to put the mouse cursor behind an element or does the mouse cursor have an z-index?

Answer 2

没有游标z-index这样的东西..你可以做的是有一个jQuery悬停函数，它获取光标悬停的对象，这反过来允许你找到对象z-index。所以真的不是想让游标拥有z索引，而是只有悬停状态。

然后根据位置设置自定义游标。众所周知，cursor:none对于这一点来说很有趣。假设您想要进入alpha块，您可以只在该alpha块下渲染一个光标，以获得光标在其下的效果。

Answer 3

由于未接受任何答案，因此我想提供正确的答案。

pointer-events: none是解决方案。

请参见简单的CSS示例：

.emotion_message {
    pointer-events: none;
    background-color: rgb(144,238,144,0.5);
    height: 20%;
    width: 94%;
    position: absolute;
    top: 40%;
    color: darkgreen;
    padding: 1%;
    text-align: center;
    border-radius: 10px;
    margin-left:3%;
    margin-right:3%;
}

在此示例中，我想显示一个图表，顶部带有一个静态摘要框，但是我希望光标与下面的图表进行交互。我还为background-color添加了不透明度，因此用户既可以看到淹没的元素（在本例中为图表）并与之交互。现在，用户看到了该框，但光标没有。

感谢@FabricioMatte在评论中提供此答案。

是否可以给游标z-index？

3 个答案: