css - transicion - El cursor se restablece al valor predeterminado después de agregar puntero-eventos: ninguno en Firefox

transiciones css ejemplos

Question

He encontrado un comportamiento extraño con respecto a la relación de CSS entre pointer-events CSS y las reglas de cursor en Firefox. Cuando configuro el cursor un elemento a un valor diferente de auto (supongamos que es wait ), el tipo de cursor cambia en consecuencia, como se esperaba. Sin embargo, cuando también agrego pointer-events: none al mismo elemento, el cursor se restablece en auto . Lo mismo ocurre si uso el cursor: wait !important . Las mismas reglas funcionan correctamente en Chromium e IE (!).

Al principio, pensé que este comportamiento podría ser esperado cuando pointer-events: none está establecido, pero de acuerdo con la sección de MDN sobre el valor none :

El elemento nunca es el objetivo de los eventos del mouse; sin embargo, los eventos del mouse pueden apuntar a sus elementos descendientes si esos descendientes tienen eventos de puntero configurados en algún otro valor. En estas circunstancias, los eventos del mouse desencadenarán escuchas de eventos en este elemento padre según corresponda en su camino hacia / desde el descendiente durante las fases de captura / burbuja de eventos.

Parece que los eventos Javascript , no los eventos CSS no se propagarán.

La pregunta es: ¿hay alguna manera de utilizar ambos pointer-events: none y cursor: wait en el mismo elemento en Firefox? Además, ¿tengo razón en la interpretación de los eventos de Javascript / CSS con respecto al extracto mencionado?

Si es importante, estoy usando Firefox 31 en Ubuntu 64bit

Aquí hay un violín . En este caso, estoy agregando reglas dinámicamente, pero lo mismo ocurre cuando solo uso CSS. El escenario del que estoy hablando es Change cursor to wait --> Disable pointer events

Answer 1

Resulta que debe establecer el cursor en el elemento principal.

Establecer ambos estilos en un elemento o cursor en un elemento anidado restablece el cursor al puntero predeterminado.

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

Ver Fiddle para más detalles.