Question

我在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 64bit上使用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。

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

1 个答案: