HTMLMesh: hover on button elements in VR

[vincentfretin]

Description

Style :hover on button elements doesn't work in VR. That's because window.getComputedStyle( element ) doesn't get updated once you are in a immersive-vr session.

Solution

Save the hover styles before entering VR, so we can apply the correct style on mouseenter/mouseleave by adding a hover class on the button.
For this to work, you need to have some css rules like that :

button:hover,
button.hover {
  background-color: red
}

Alternatives

You can modify on the fly all the loaded stylesheets to add the button.hover variant like it has been done on other aframe ui components, but I find that very intrusive.

Additional context

I create this issue for visibility. I did some months ago a PR on aframe-htmlmesh AdaRoseCannon/aframe-htmlmesh#9 to implement this. This works great, but could be generalized to other elements than button, and use something different than using data attributes to keep a list of css properties with their value. I'm not planning to work on it right now. If you have suggestions, you can comment on the PR.

[mrdoob]

That's because window.getComputedStyle( element ) doesn't get updated once you are in a immersive-vr session.

Oh, that's annoying...

[remmel]

FYI, I had same needs in my https://www.metalograms.com/demo/ project and I also adds .hover class on items listening to mouse events when mouse is really hover.