Hi, I seem to have a small issue with my script when using mouseover and mouseout to display a hover effect of a button. What I have done was to create 3 layers (buttonup, buttonhover, buttondown) and my goal was to set for buttonup the onmouseover to showLayer("buttonhover"), while on the buttonhover with onmouseout to showLayer("buttonup"). This works great, but the moment I set showLayer("buttondown") for onclick on buttonhover, instead of going to that layer it returns to buttonup. For some reasons mouseout and onclick don't seem to cooperate when used together. I even tried mousedown event but with no luck. Can someone possibly give me a hint what is wrong? Thank you kindly!

document.documentElement.setAttribute("height", "100%");
document.documentElement.setAttribute("width", "100%");

function showLayer(id) {
    const layers = document.querySelectorAll("svg > g[*|groupmode=layer]");
    layers.forEach(layer => {
        layer.style.display = "none"
});

const layerToShow = document.querySelector("#" + id);
    layerToShow.style.display = "inline";
}