Menunjukkan submenu apabila tetikus dilegar di atas butang

Question

Saya sedang mencari penyelesaian di mana apabila saya menuding pada butang submenu muncul. Pada masa ini menu hanya dipaparkan apabila diklik. Adakah sesiapa tahu apa yang saya perlu ubah supaya apabila menuding pada butang menu muncul dan apabila diklik menu kekal di sana.

Penyelesaian: Tukar tuding kepada tetikus.

Adakah sesiapa tahu cara membuat semua bahagian (sect1...) tidak ditunjukkan pada tetikus?

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

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

fungsi toggleDivs(s){

    //set semula
    document.getElementById("sect1").classList.remove("ditunjukkan");
    document.getElementById("sect2").classList.remove("ditunjukkan");
    document.getElementById("sect3").classList.remove("ditunjukkan");
    //tunjukkan
    document.getElementById(s).classList.add("ditunjukkan");
}
//paksa butang1 mulakan keadaan, jika perlu
//btn1.focus();
//btn1.click();
</skrip>
<gaya>

    .elementor-editor-active .hidden{
        paparan:blok;
    }
    .tersembunyi{
        paparan:tiada;
    }
    .tunjuk{
        paparan: blok !penting;
    }

</style>

Answer 1

Tiada acara "legar". Anda perlu menggunakan mouseover, mouseenter dan mouseout untuk mengendalikannya.

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