Given two overlapping divs a and b: Changing the "pointer-events" property of a (top div) to "none" will not allow mouse event passthrough to div b (below). The change only takes effect whenever the curser is moved a bit.
How can one make this change be instant, without the user having to move the mouse?
Steps for problem replication using a hover effect:
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));
}
To achieve this you want the browser to rerender the scene. There's plenty of ways of doing this – adding or removing elements, for example.
An example is bellow – I've added a div "c" which does nothing, but after you change the pointer-events on "a", I call a setTimeout (without milliseconds, so it's the very next frame) when the background is set, and the display for "c" is set to none. This makes the whole scene redraw and you get the hover value on "b" that you want.
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>