마우스가 버튼 위에 있을 때 하위 메뉴 표시

Question

버튼 위로 마우스를 가져가면 하위 메뉴가 나타나는 솔루션을 찾고 있습니다. 현재 메뉴는 클릭할 때만 표시됩니다. 버튼 위로 마우스를 가져갈 때 메뉴가 표시되고 클릭하면 메뉴가 그대로 유지되도록 변경해야 할 사항을 아는 사람이 있습니까?

해결책: 마우스 오버를 마우스 오버로 변경하세요.

마우스 오버 시 모든 섹션(sect1...)이 표시되지 않도록 하는 방법을 아는 사람이 있습니까?

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

btn1.mouseover = 함수(이벤트){
    event.preventDefault();
    ggleDivs("sect1");
};
btn2.mouseover = 함수(이벤트){
    event.preventDefault();
    ggleDivs("sect2");
};
btn3.mouseover = 함수(이벤트){
    event.preventDefault();
    ggleDivs("sect3");
};

함수 토글Divs(들){

    //초기화
    document.getElementById("sect1").classList.remove("표시됨");
    document.getElementById("sect2").classList.remove("표시됨");
    document.getElementById("sect3").classList.remove("표시됨");
    //보여주다
    document.getElementById(s).classList.add("표시됨");
}
//필요한 경우 강제로 버튼 1 상태 초기화
//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