添加指针事件后光标重置为默认值：在 Firefox 中无答案

【问题标题】：Cursor resets to default after adding pointer-events:none in Firefox添加指针事件后光标重置为默认值：在 Firefox 中无
【发布时间】：2014-10-23 04:43:25
【问题描述】：

我在 Firefox 中遇到了关于 CSS pointer-events 和 cursor 规则之间的 CSS 关系的奇怪行为。当我将一个元素的cursor 设置为与auto 不同的任何值时（假设它是wait），光标的类型会相应地改变，正如预期的那样。但是，当我还将pointer-events: none 添加到同一元素时，光标将重置为auto。如果我使用cursor: wait !important，也会发生同样的情况。相同的规则在 Chromium 和 IE (!) 中也能正常工作。

一开始我认为这可能是设置pointer-events: none 时的预期行为，但根据MDN 关于none 值的部分：

元素永远不是鼠标事件的目标；但是，如果这些后代元素的指针事件设置为其他值，则鼠标事件可能会针对其后代元素。在这些情况下，鼠标事件将在事件捕获/冒泡阶段期间适当地触发此父元素上的事件侦听器。

似乎不会传播 Javascript 事件，而不是 CSS 事件。

问题是：有没有办法在 Firefox 的同一个元素上同时使用 pointer-events: none 和 cursor: wait？另外，关于上述摘录，我对 Javascript/CSS 事件的解释是否正确？

如果重要的话，我在 Ubuntu 64 位上使用 Firefox 31

这是fiddle。在这种情况下，我正在动态添加规则，但仅在使用 CSS 时也会发生同样的情况。我说的场景是Change cursor to wait --> Disable pointer events

【问题讨论】：

在 Firefox 31、Windows 上的行为相同
差不多一年后，我在 Firefox 38 和 Chrome 43 和 IE11 上看到了相同的行为！我的 Linux 机器在家里，所以我无法确认 Chromium。

标签： css firefox mouse-cursor

【解决方案1】：

原来你必须在父元素上设置光标。

在一个元素上设置两种样式或在嵌套元素上设置光标会将光标重置为默认指针。

<div class="cursor-wait">
    <a href="#">wait</a>
    <div class="no-pointer-events">
        <a href="#">wait > no events</a><!-- works here -->
    </div>
</div>

详情请见Fiddle。

【讨论】：

看起来 Bootstrap 需要更新它的框架，因为它不会对禁用的按钮和其他按钮执行此操作。老实说，按钮似乎很难，因为 Bootstrap 只知道你有一个你想要禁用的按钮，它可能有也可能没有子级，并且没有一种简单的（跨浏览器）方法可以在 CSS 中获取父级。