Dados dos divs a y b superpuestos: cambiar la propiedad de "eventos de puntero" de a (div superior) a "ninguno" no permitirá que el evento del mouse pase a div b (abajo). El cambio solo tiene efecto cuando el cursor se mueve un poco.
¿Cómo se puede hacer que este cambio sea instantáneo, sin que el usuario tenga que mover el mouse?
Pasos para la replicación de problemas usando un efecto de desplazamiento:
HTML:
<div class="a"></div> <div class="b"></div>CSS:
.a { top: 0; position: absolute; height: 30px; width: 30px; background: red; z-index: 1; } .b { top: 0; position: absolute; height: 50px; width: 50px; background: blue; } .b:hover { background: green; }JS:
delay(3000).then(() => { let a = document.getElementsByClassName("a")[0]; a.style["pointer-events"] = "none"; // < this updating is the problem a.style["background"] = "rgba(255,0,0,.5)"; // purely visual }); // delay function function delay(time) { return new Promise(resolve => setTimeout(resolve, time)); }Para lograr esto, desea que el navegador vuelva a renderizar la escena. Hay muchas maneras de hacer esto, por ejemplo, agregando o eliminando elementos.
Un ejemplo es el siguiente: agregué un div "c" que no hace nada, pero después de cambiar los eventos de puntero en "a", llamo a setTimeout (sin milisegundos, por lo que es el siguiente cuadro) cuando el fondo es configurado, y la visualización de "c" se configura en ninguno. Esto hace que toda la escena se vuelva a dibujar y obtienes el valor de desplazamiento en "b" que deseas.
delay(3000).then(() => { let a = document.getElementsByClassName("a")[0]; a.style["pointer-events"] = "none"; // < this updating is the problem // this is just to show that it could be any div that you do do this to let c = document.getElementsByClassName("c")[0]; setTimeout(() => { a.style["background"] = "rgba(255,0,0,.5)"; // purely visual c.style.display = "none"; }); }); // delay function function delay(time) { return new Promise(resolve => setTimeout(resolve, time)); } .a { top: 0; position: absolute; height: 30px; width: 30px; background: red; z-index: 1; } .b { top: 0; position: absolute; height: 50px; width: 50px; background: blue; } .b:hover { background: green; } <div class="a"></div> <div class="b"></div> <div class="c"></div>