Affiche un sous-menu lorsque la souris passe sur le bouton

Question

Je recherche une solution où, lorsque je survole un bouton, un sous-menu apparaît. Actuellement, le menu ne s'affiche que lorsque vous cliquez dessus. Est-ce que quelqu'un sait ce que je dois changer pour que lorsque vous survolez un bouton, le menu apparaisse et que lorsque vous cliquez dessus, le menu reste là.

Solution : remplacez le survol par le survol de la souris.

Est-ce que quelqu'un sait comment faire en sorte que toutes les sections (sect1...) ne s'affichent pas au survol de la souris ?

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

btn1.mouseover = fonction (événement) {
    event.preventDefault();
    toggleDivs("sect1");
} ;
btn2.mouseover = fonction (événement) {
    event.preventDefault();
    toggleDivs("sect2");
} ;
btn3.mouseover = fonction (événement) {
    event.preventDefault();
    toggleDivs("sect3");
} ;

fonction toggleDivs(s){

    //réinitialiser
    document.getElementById("sect1").classList.remove("montré");
    document.getElementById("sect2").classList.remove("montré");
    document.getElementById("sect3").classList.remove("montré");
    //montrer
    document.getElementById(s).classList.add("montré");
}
// forcer l'initialisation de l'état du bouton 1, si nécessaire
//btn1.focus();
//btn1.clic();
</script>
<style>

    .elementor-editor-active .hidden{
        bloc de visualisation;
    }
    .caché{
        affichage : aucun ;
    }
    .montrer{
        display: bloquer !important;
    }

</style>

Answer 1

Aucun événement de « survol ». Vous devez utiliser mouseover, mouseenter et mouseout pour le gérer.

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