当鼠标悬停在按钮上时，显示一个子菜单
P粉021708275
2023-08-31 11:22:01
<p>我正在寻找一个解决方案，当我悬停在一个按钮上时，会弹出一个子菜单。目前只有在点击时才显示菜单。有人知道我需要改变什么，以便当悬停在一个按钮上时菜单显示出来，而点击时菜单保持在那里。</p>
<p>解决方案：将悬停改为mouseover。</p>
<p><strong>有人知道如何使鼠标悬停时不显示所有部分（sect1...）吗？</strong></p>
<pre class="brush:php;toolbar:false;"><script>
var divs
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");
btn1.mouseover = function(event){
event.preventDefault();
toggleDivs("sect1");
};
btn2.mouseover = function(event){
event.preventDefault();
toggleDivs("sect2");
};
btn3.mouseover = function(event){
event.preventDefault();
toggleDivs("sect3");
};
function toggleDivs(s){
//reset
document.getElementById("sect1").classList.remove("shown");
document.getElementById("sect2").classList.remove("shown");
document.getElementById("sect3").classList.remove("shown");
//show
document.getElementById(s).classList.add("shown");
}
//force button1 state initialise, if required
//btn1.focus();
//btn1.click();
</script>
<style>
.elementor-editor-active .hidden{
display:block;
}
.hidden{
display:none;
}
.shown{
display: block !important;
}
</style></pre></p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
没有“hover”事件。您必须使用mouseover、mouseenter和mouseout来处理它。
https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseover_event