防止光标在重叠时更改

Question

我正在为一个目前正在建设的网站编写CSS和HTML，这是我不太熟悉的代码。

根据请求，我创建了一个位于屏幕左侧的导航菜单，当点击时，该菜单会展开以部分覆盖页面内容，允许用户在不需要时显示和隐藏导航。

导航打开时重叠的内容是一堆表，具有可点击的单元格和可调整大小的列（即，它们将光标更改为指针，以允许用户知道他们可以对单元格/表列执行某些操作）

但当导航在页面内容上展开时，我仍然会看到光标在它后面的变化，使它看起来可以在错误的位置点击。

有人能告诉我如何防止页面上的元素在其后面的元素上获取光标更改的正确方向吗？当navBar打开和关闭时，我可能可以使用javascript动态更改CSS（在打开时删除光标，在关闭时添加回来），但我正在寻找一个更简单、更通用的修复程序，将来也可以使用。

Answer 1

听起来您需要为每个元素设置z-index属性。

如果您创建的元素没有指定z索引，则它们将自动索引，默认情况下，您在创建导航后创建的任何元素都将具有更高的z索引。

确保所有元素都有z索引，并且导航的z索引高于它将重叠的元素，例如：

.nav {
    z-index: 100;
}
.el1 {
   z-index: 99;
}
.el2 {
    z-index: 98;
}

等等，把它想象成把你的元素叠在一起，如果一个元素的z索引比另一个元素高，它就会在上面。

Answer 2

您可以使用cursorsCSS属性（MDN）强制使用特定的游标。请参阅下面，我强制所有不是链接的元素都有一个常规光标：

*:not(a) {
  cursor: default
}

此外，请参阅@Nunchy的答案，以正确配置z-index，这样这种类型的事情就不会发生