Displaying a sub-sub-menu on hover on button-CodePudding

I am looking for a solution so that when I hover over a button, a sub-menu is pulled up. Currently the menu is only displayed when clicking. Anyone have an idea what I need to change so that when hover a button the menu is displayed and when clicking, the menu stays there.

Solution: switch hover with mouseover.

Does anyone have an idea how it can work that when you mouseover not applies all section (sect1...) are not displayed?

<script>
var divs
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");

btn1.mouseover = function(event){
    event.preventDefault();
    toggleDivs("sect1");
};
btn2.mouseover = function(event){
    event.preventDefault();
    toggleDivs("sect2");
};
btn3.mouseover = function(event){
    event.preventDefault();
    toggleDivs("sect3");
};

function toggleDivs(s){

    //reset
    document.getElementById("sect1").classList.remove("shown");
    document.getElementById("sect2").classList.remove("shown");
    document.getElementById("sect3").classList.remove("shown");
    //show
    document.getElementById(s).classList.add("shown");
}
//force button1 state initialise, if required
//btn1.focus();
//btn1.click();
</script>
<style>

    .elementor-editor-active .hidden{
        display:block;
    }
    .hidden{
        display:none;
    }
    .shown{
        display: block !important;
    }

</style>

CodePudding user response：

There is no "hover"-event. You have to handle that with mouseover, mouseenter, mouseout.

https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseover_event