防止光标在重叠时改变

Question

我正在为一个正在建设中的站点编写 CSS 和 HTML，我不太熟悉需要编写代码的内容。

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

导航在打开时重叠的内容是一堆表格，带有可点击的单元格和可调整大小的列（即，它们将光标更改为指针，让用户知道他们可以使用 cells/table 列）

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

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

Answer 1

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

如果您在创建元素时未指定 z-index，它们将被自动编入索引，您在创建导航后创建的任何元素将默认具有更高的 z-index。

确保您的所有元素都有一个 z-index，并且导航的 z-index 比它将重叠的元素高，例如：

.nav {
    z-index: 100;
}

.el1 {
   z-index: 99;
}

.el2 {
    z-index: 98;
}

等等，将其视为将您的元素彼此叠加在一起，如果一个元素的 z-index 高于另一个元素，它将位于该元素之上。

Answer 2

您可以使用 cursors CSS 属性 (MDN) 强制光标以特定方式显示。见下文，我强制所有不是链接的元素都具有常规光标：

*:not(a) {
  cursor: default
}

此外，请参阅以正确配置 z-index，这样此类事情就不会发生

Prevent Cursor from changing on overlap