jQuery - css 在更高的 Z-index 上禁用 div答案

【问题标题】：jQuery - css disable div on higher Z-indexjQuery - css 在更高的 Z-index 上禁用 div
【发布时间】：2012-11-24 19:50:44
【问题描述】：

我的问题： 是否可以禁用 div（Z-index 2），使其仍然可见并使其被鼠标“不明显”，这样我就可以通过它（鼠标悬停，点击）实现鼠标操作到它下面的启用 div？这意味着您可以单击下面的 div，因为您的鼠标位于禁用的 div 顶部或将鼠标悬停在顶部的 div 上，这不会影响或影响其下方 div 调用的鼠标悬停动作。

问题： 我在网上和 stackoverflow 上进行了搜索，但找不到我正在寻找的简单答案。我有几个 div，有些在不同的 Z-index 上相互重叠，而顶部的那些则弄乱了下面的动作。

示例： - -我在下部 div（Z-Index 1）中有一个漂亮的图形框，其中包含鼠标悬停动作。当鼠标悬停在框上时，它会触发动作。 - - 我在新图层（Z-Index 2）上的 div 上的框上也有一些漂亮的图形文本，但这会干扰下面框上的鼠标悬停动作。它使我的鼠标看起来像是离开了盒子，但它不仅仅是在更高级别的 div 上。

问题摘要： 我是否可以禁用 div，使其不可点击或触发鼠标悬停调用，但仍然可见？

【问题讨论】：

标签： jquery html z-index mouseover clickable

【解决方案1】：

是的，您可以使用以下 CSS 属性：

pointer-events: none;

取决于您所针对的浏览器。不会说这个属性得到很好的支持。

见：http://caniuse.com/pointer-events

【讨论】：

太棒了。我知道它必须同时是可能的和简单的。伟大的！不是我需要它。只是想知道这是否可以通过 jQuery 进行更改，例如打开或关闭？无论如何再次感谢。我还不能接受你的回答，因为还不到“十分钟”:)
当然，只要把这个属性放到一个单独的类中（.no-pointer-events等），然后用jQuery改类：.addClass('no-pointer-events')，或者.toggleClass('no-pointer-events')。
哦，拍摄。刚刚注意到这在 IE 上不起作用？还是一些浏览器？啊，臭男人。
是的，我答案末尾的链接显示了对该属性的支持。不是很好的支持，绝对不能依赖。

【解决方案2】：

您是否尝试让您的 2 级 div 实际上是 1 级的子级？您应该跟踪 mouseenter/mouseleave 而不是 mouseover/mouseout

小解释：mouseout 会在您的鼠标未直接位于捕获的事件目标上时触发，即使您的指针越过目标的子对象也是如此。对于mouseleave，只有在鼠标指针离开目标元素及其任何子元素时才会触发它。可以把它想象成 mouseenter 类似于 CSS :hover。

【讨论】：