当鼠标悬停在按钮上时,显示一个子菜单
P粉021708275
P粉021708275 2023-08-31 11:22:01
[CSS3讨论组]

我正在寻找一个解决方案,当我悬停在一个按钮上时,会弹出一个子菜单。目前只有在点击时才显示菜单。有人知道我需要改变什么,以便当悬停在一个按钮上时菜单显示出来,而点击时菜单保持在那里。

解决方案:将悬停改为mouseover。

有人知道如何使鼠标悬停时不显示所有部分(sect1...)吗?

<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>

P粉021708275
P粉021708275

全部回复(1)
P粉883223328

没有“hover”事件。您必须使用mouseover、mouseenter和mouseout来处理它。

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号