マウスをボタンの上に置くとサブメニューが表示されます

Question

ボタンの上にマウスを置くとサブメニューがポップアップする解決策を探しています。現在、メニューはクリックされた場合にのみ表示されます。ボタンの上にマウスを置くとメニューが表示され、クリックするとメニューがそこに留まるようにするには何を変更する必要があるか知っている人はいますか。

解決策: ホバーをマウスオーバーに変更します。

すべてのセクション (sect1...) をマウスオーバー時に表示しないようにする方法を知っている人はいますか?

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

btn1.mouseover = 関数(イベント){
    イベント.preventDefault();
    toggleDivs("sect1");
};
btn2.mouseover = 関数(イベント){
    イベント.preventDefault();
    toggleDivs("sect2");
};
btn3.mouseover = 関数(イベント){
    イベント.preventDefault();
    toggleDivs("sect3");
};

関数 toggleDivs(s){

    //リセット
    document.getElementById("sect1").classList.remove("表示");
    document.getElementById("sect2").classList.remove("表示");
    document.getElementById("sect3").classList.remove("表示");
    //見せる
    document.getElementById(s).classList.add("表示");
}
// 必要に応じて、button1 の状態を強制的に初期化します
//btn1.focus();
//btn1.click();
</スクリプト>
<スタイル>

    .elementor-editor-active .hidden{
        表示ブロック;
    }
    。隠れた{
        ディスプレイ:なし;
    }
    。見せる{
        表示: ブロック!重要;
    }

</style>

Answer 1

「ホバー」イベントはありません。これを処理するには、mouseover、mouseenter、mouseout を使用する必要があります。

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