Question

我正在为正在建设的网站编写CSS和HTML，我不太熟悉必须编写代码。

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

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

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

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

Answer 1

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

如果您创建的元素没有指定z-index，它们会自动编入索引，您创建导航后创建的任何元素默认都会有更高的z-index。

确保所有元素都具有z-index，并且nav的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
}

此外，请参阅@Nunchy's answer以正确配置z-index，以便不会发生此类事件