鼠标移出一级菜单如何使得二级菜单不立刻消失

最新推荐文章于 2022-10-19 16:58:50 发布
最新推荐文章于 2022-10-19 16:58:50 发布
阅读量5.3k 收藏 5
点赞数 4
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kalinux/article/details/84031152
版权

鼠标经过一级菜单时，弹出下拉菜单；希望的是：鼠标移出一级菜单并且鼠标不在二级菜单悬停时，下拉菜单消失；

那么就设置4个事件：

对于一级菜单：onmouseover和onmouseout

对于二级菜单：onmouseover和onmouseout

但是你要保证一级菜单和二级菜单连接紧密，中间不能有空隙，否则一旦离开一级菜单，二级马上消失，根本来不及悬停；

kalinux
关注
编写一个简单的css二级菜单，鼠标移动二级菜单就消失的问题
forever_ylx的专栏
12-23 2465
二级列表学习
鼠标移到菜单上弹出二级菜单特效
04-12
鼠标移到菜单上弹出二级菜单特效,利用timeout原来，以及 mouseout 和 mousehover 的先后原来。 只是一个简单 demo，未做其他处理。
鼠标经过显示二级菜单js特效
10-27
本文章来给大家推荐一个不错的鼠标经过显示二级菜单js特效效果，有需要了解的朋友可以参考一下
鼠标移至二级菜单时一级菜单仍然保留停留样式.rar
03-16
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <HTML xmlns="http://www.w3.org/1999/xhtml"> <HEAD> <META content="IE=7.0000" http-equiv="X-UA-Compatible"> <TITLE> 二级下拉特效</TITLE> <META content="text/html; charset=utf-8" http-equiv=Content-Type> <LINK rel=stylesheet href="css/css.css"> <META name=GENERATOR content="MSHTML 8.00.6001.19222"></HEAD> <BODY> <div id="headm"> <ul> <li><a class="topa" href="http://www. .com">首页</a></li> <li> <div class="dh"><a href="http://www. .com" class="topa">关于 </a> <ul> <li><a href="http://www. .com" >集团简介</a></li> <li><a href="http://www. .com" >分支机构</a></li> <li><a href="http://www. .com" >典型案例</a></li> <li><a href="http://www. .com" >京都荣誉</a></li> <li><a href="http://www. .com" >社会责任</a></li>
html 二级菜单 鼠标移动消失,鼠标移开按钮时怎么不让二级菜单马上消失？
weixin_31776191的博客
06-04 750
这是我之前写的一个代码希望对你有所帮助，记得自己引入jq原始文件比如： ，之前的回答在 这里：https://segmentfault.com/q/1010000005890523/a-1020000005897412Document* {margin: 0;padding: 0;}body{width: 100%;height: 100%;background: #f88;}#box {hei...
用jquery实现：悬浮菜单栏，鼠标指向二级菜单的时候，一级菜单不消失
qq_43364342的博客
08-03 1724
` <style> * { padding: 0; margin: 0; } .body { height: 600px; width: 500px; border: 1px solid #00B0FF; margin: 50px ...
弹出二级导航栏后鼠标移入导航栏不消失
returnadsss的博客
01-28 1699
最近在仿百度网页来练习css和js,遇到一个问题，如何让鼠标移到标题后弹出二级导航栏，这很容易实现，就是通过类似下文的代码： let moreBtn=document.getElementById("more"); let haBtn=document.getElementById("ha"); moreBtn.onmouseover=function(){ haBtn.style.display="block"; } moreBtn.onmouseout=function(){
jquery实现鼠标滑过显示二级下拉菜单效果
10-23
如果要处理鼠标移出一级菜单项时二级菜单项的隐藏逻辑，可以绑定`mouseout`事件。在`mouseout`事件的处理函数中，将二级菜单项的`display`属性重新设置为`none`，使其再次隐藏。为了防止鼠标在进入二级菜单项之前就...
当鼠标移出灰色区域时候,菜单项怎么隐藏起来
10-30
例如，在本例中，我们需要实现一个功能：当鼠标移出预先设定的灰色区域时，原本显示的菜单项会自动隐藏起来。下面将详细解析如何通过HTML、CSS及JavaScript来完成这一功能。 #### HTML结构定义 首先，我们需要构建...
鼠标经过显示二级菜单js效果
06-21
// 鼠标移出一级菜单项时隐藏二级菜单 menuItem.addEventListener('mouseout', function() { submenu.style.display = 'none'; }); } } ``` 这段代码首先获取所有的一级菜单项，并检查它们是否有二级菜单。...
elementui 导航菜单 嵌入组件时 鼠标移出弹窗之外，有时候弹窗没有关闭？
qq_38180363的博客
06-25 629
data() { inhistorypanel:false, // 增加一个变量用来判断鼠标是否在面板内 } chkIn() { this.inhistorypanel = true; }, chkOut(){ this.inhistorypanel = false; setTimeout(()=>{ if(!this...
html中二级菜单老是自动消失,下面这个导航在IE下鼠标移动到二级菜单的过程中二级菜单就消失了，请问有没有什么办法解决？...
weixin_42511702的博客
05-31 649
1 2 3 4 Demo5 6 7 #cssmenu ul{margin:0;padding:0;}8 #cssmenu li{margin:0;padding:0;}9 #cssmenu a{margin:0;padding:0;}10 #cssmenu ul{list-style:none;}11 #cssmenu a{text-decoration:none;}12 ...
实现一级菜单掠过显示二级菜单的方法
u013521540的博客
12-05 628
测试页面 第一个菜单 第一个菜单的子菜单 第一个菜单的子菜单 第一个菜单的子菜单 第二个菜单 第一个菜单的子菜单 第一个菜单的子菜单 第三个菜单 第四个菜单 第五个菜单...
【问题来了】怎么实现网站侧边菜单鼠标滑过展开二级菜单
小飞快跑的博客
04-08 890
项目场景： 一个通用的管理系统或者网站 问题描述： 实现网站侧边菜单鼠标滑过展开二级菜单，展开位置和一级菜单位置齐平，如果二级菜单太长了超出屏幕底部，就让二级菜单靠齐底部 原因分析： 效果炫酷，上效果 解决方案： 目前只是实现了一级菜单打开二级菜单，后续有机会实现打开三级菜单，代码如下： <html> <title> 侧边菜单滑动出现效果</title> <head> <script type="text/javascript" src="http:
JQuery中鼠标划过一级菜单，有二级菜单的就显示的处理
热门推荐
chaplinlong的博客
04-16 1万+
重点是逻辑，理解了就好了。先直接上html5代码：<!doctype html> <html> <head> <meta charset="utf-8"> <title>鼠标划过一级菜单，有二级菜单的就显示</title> <script src="../js/jquery-2.2.3.js"></script> <script> $(function() { $("li:h
CSS 实现鼠标悬停上弹出二级菜单（一）
分享我的点点滴滴，在成长路上与你同行！
09-08 6585
效果: HTML页面 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } ul { list-style: none; display: flex; ..
用javascript实现鼠标移入出现下拉菜单
qq_49464663的博客
08-09 3831
javascript版下拉菜单的实现，鼠标事件，事件委托
CSS 小技巧：如何保留 hover 的状态？
郊眠寺
10-19 4500
下面来总结一下吧1.实现的原理就是利用，让还原的时间足够长，这样就实现了保留hove状态的效果了；2.单选效果可以在鼠标移入整个列表的时候就清除所有的状态，这样就只有当前hover的选项才会被保留下来，有点类似于js中的思维；3.需要注意的是所有属性必须是支持transition的，比如就不支持transition，需要用其他样式替代；整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。
前端----HTML/JS 鼠标停留和移开实例----鼠标指示时显示二级菜单(共三级)
nO0b
09-25 1万+
onmouseover和onmouseout事件和各种position定位的练习, 效果是鼠标指示一级菜单显示二级菜单, 指示二级菜单的选项出现相应三级菜单 效果图:     一级菜单:   鼠标停留时的二级菜:   三级: 有一个小技巧效果就是二级菜单出现时 , 一级菜单的右边框 消失,和二级菜单连起来 , 其实是二级菜单的大div下加了一个白块div, 调整pos...
js 鼠标hover 显示二级菜单
最新发布
09-04
在使用 JavaScript 实现鼠标 hover 显示二级菜单时，我们可以通过以下步骤来实现： 1. 在 HTML 中，首先创建一个包含一级菜单的列表，并为每个菜单项添加一个 ID，例如： ``` <ul> <li id="menu1">菜单1</li> <li id="menu2">菜单2</li> <li id="menu3">菜单3</li> </ul> ``` 2. 接下来，创建包含二级菜单内容的 div，并为其设置一个唯一的 ID，例如： ``` <div id="submenu1">二级菜单1的内容</div> <div id="submenu2">二级菜单2的内容</div> <div id="submenu3">二级菜单3的内容</div> ``` 3. 在 JavaScript 中，我们需要使用事件监听器来监听鼠标的 hover 事件。当鼠标悬停在一级菜单上时，显示相应的二级菜单。我们可以使用 `addEventListener` 方法来实现事件监听，例如： ``` document.getElementById("menu1").addEventListener("mouseover", function() { document.getElementById("submenu1").style.display = "block"; }); ``` 4. 为了实现当鼠标移开一级菜单时，隐藏相应的二级菜单，我们需要添加鼠标的移出事件的监听器，例如： ``` document.getElementById("menu1").addEventListener("mouseout", function() { document.getElementById("submenu1").style.display = "none"; }); ``` 5. 上述步骤可以根据需要进行重复，以实现其他一级菜单对应的二级菜单的显示和隐藏。 通过上述步骤，我们可以使用 JavaScript 实现鼠标 hover 显示二级菜单的效果。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值