在Firefox中添加指针事件后,光标重置为默认值:无

Question

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

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

该元素永远不是鼠标事件的目标; 但是,如果这些后代将指针事件设置为某个其他值,则鼠标事件可能会以其后代元素为目标.在这些情况下,鼠标事件将在事件捕获/冒泡阶段期间在它们往返于后代的路径上触发此父元素上的事件侦听器.

似乎Javascript事件,而不是CSS事件将不会传播.

现在的问题是:是否有同时使用的方式pointer-events: none和cursor: wait在Firefox中相同的元素？另外,我是否正确解释有关上述摘录的Javascript/CSS事件？

如果重要的话,我在Ubuntu 64bit上使用Firefox 31

这是一个小提琴.在这种情况下,我正在动态添加规则,但仅在使用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>

详情请见小提琴.