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

前端之家收集整理的这篇文章主要介绍了css – 在Firefox中添加指针事件后,游标重置为默认值:无前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
对于Firefox中的CSS指针事件和游标规则之间的CSS关系,我遇到了一个奇怪的行为.当我将一个元素的游标设置为与auto不同的值(假设是等待)时,游标的类型会根据预期而相应地改变.但是,当我还添加指针事件:none到相同的元素,光标被重置为自动.如果我使用光标,同样会发生:等待!重要.相同的规则在Chromium和IE(!)中正常工作.

在开始的时候,我以为这可能是指针事件期间的行为:没有设置,但根据MDN部分关于无值:

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事件将不被传播.

问题是:有没有办法使用两个指针事件:none和cursor:等待Firefox中的同一个元素?此外,关于上述摘录的Javascript / CSS事件的解释,我是对的吗?

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

这是一个fiddle.在这种情况下,我动态地添加规则,但是仅在使用CSS时发生相同的规则.我正在谈论的情况是将光标更改为等待 – >禁用指针事件

解决方法

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

在一个元素或嵌套元素上的游标上设置两个样式将光标重置为默认指针.

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

详见Fiddle.

猜你在找的CSS相关文章