css - 添加指针事件后光标重置为默认值 :none in Firefox

Question

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

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

The element is never the target of mouse events; however, mouse events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, mouse events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.

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

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

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

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

Answer 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了解详情。