Menu
I've encountered a strange behaviour regarding CSS relationship between CSS pointer-events and cursor rules in Firefox. When I set an element's cursor to any value different from auto (let's say it's wait), the type of the cursor changes accordingly, as expected. However, when I also add pointer-events: none to the same element, the cursor is reset to auto. The same happens if I use cursor: wait !important. The very same rules work correctly in Chromium and IE (!).
In the beginning I thought that this may be expected behaviour when pointer-events: none is set, but according to the MDN section about the none value:
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.
It appears that the Javascript events, not CSS events won't be propagated.
The question is: is there a way to use both pointer-events: none and cursor: wait on the same element in Firefox? Also, am I right about the interpretation of Javascript/CSS events regarding the mentioned excerpt?
If it matters, I'm using Firefox 31 on Ubuntu 64bit
Here's a fiddle. In this case I'm adding rules dynamically, but the same occurs when using CSS only. The scenario I'm talking about is Change cursor to wait --> Disable pointer events
664
Using pointer-events: none will disable all mouse interactions with that element. If you wanted to change the cursor property, you would have to apply the changes to the parent element. You could wrap the link with an element and add the cursor property to it.
In addition to indicating that the element is not the target of pointer events, the value none instructs the pointer event to go "through" the element and target whatever is "underneath" that element instead.
Pointer events are DOM events that are fired for a pointing device. They are designed to create a single DOM event model to handle pointing input devices such as a mouse, pen/stylus or touch (such as one or more fingers). The pointer is a hardware-agnostic device that can target a specific set of screen coordinates.
Default Pointer Events on an element corresponds to the CSS pointer events property. It controls whether or not an element will "pass through" clicks to elements that are underneath it (that is, elements that have a smaller z-index). For example, in the following canvas an image sits over a button element.
Turns out that you have to set cursor on the parent element.
Setting both styles on one element or cursor on nested element resets the cursor to default pointer.
<div class="cursor-wait">
<a href="#">wait</a>
<div class="no-pointer-events">
<a href="#">wait > no events</a><!-- works here -->
</div>
</div>
See Fiddle for details.
152
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
