Zeigt ein Untermenü an, wenn die Maus über die Schaltfläche bewegt wird

Question

Ich suche nach einer Lösung, bei der ein Untermenü angezeigt wird, wenn ich mit der Maus über eine Schaltfläche fahre. Derzeit wird das Menü nur angezeigt, wenn darauf geklickt wird. Weiß jemand, was ich ändern muss, damit das Menü angezeigt wird, wenn ich mit der Maus über eine Schaltfläche fahre, und wenn ich darauf klicke, bleibt das Menü dort.

Lösung: Hover auf Mouseover umstellen.

Weiß jemand, wie man dafür sorgt, dass alle Abschnitte (Abschnitt 1...) beim Mouseover nicht angezeigt werden?

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

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

Funktion toggleDivs(s){

    //zurücksetzen
    document.getElementById("sect1").classList.remove("shown");
    document.getElementById("sect2").classList.remove("shown");
    document.getElementById("sect3").classList.remove("shown");
    //zeigen
    document.getElementById(s).classList.add("shown");
}
//Erzwinge die Initialisierung des Button1-Status, falls erforderlich
//btn1.focus();
//btn1.click();
</script>
<Stil>

    .elementor-editor-active .hidden{
        Bildschirmsperre;
    }
    .versteckt{
        Anzeige:keine;
    }
    .zeigen{
        Anzeige: block !important;
    }

</style>

Answer 1

没有“hover”事件。您必须使用mouseover、mouseenter和mouseout来处理它。

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