마우스가 버튼 위에 있을 때 하위 메뉴 표시
<p>버튼 위로 마우스를 가져가면 하위 메뉴가 나타나는 솔루션을 찾고 있습니다. 현재 메뉴는 클릭할 때만 표시됩니다. 버튼 위로 마우스를 가져갈 때 메뉴가 표시되고 클릭하면 메뉴가 그대로 유지되도록 변경해야 할 사항을 아는 사람이 있습니까? </p>
<p>해결책: 마우스 오버를 마우스 오버로 변경하세요. </p>
<p><strong>마우스 오버 시 모든 섹션(sect1...)이 표시되지 않도록 하는 방법을 아는 사람이 있습니까? </strong></p>
<pre class="brush:php;toolbar:false;"><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></pre></p>
