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

最新推荐文章于 2022-08-09 20:10:44 发布
原创 最新推荐文章于 2022-08-09 20:10:44 发布 · 5.4k 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文探讨了网页中菜单交互设计的细节，重点讲解如何通过合理设置鼠标经过事件，实现平滑的一级菜单下拉及二级菜单显示隐藏效果，确保用户体验流畅。

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

那么就设置4个事件：

对于一级菜单：onmouseover和onmouseout

对于二级菜单：onmouseover和onmouseout

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

kalinux
关注
CSS 小技巧：如何保留 hover 的状态？
郊眠寺
10-19 4813
下面来总结一下吧1.实现的原理就是利用，让还原的时间足够长，这样就实现了保留hove状态的效果了；2.单选效果可以在鼠标移入整个列表的时候就清除所有的状态，这样就只有当前hover的选项才会被保留下来，有点类似于js中的思维；3.需要注意的是所有属性必须是支持transition的，比如就不支持transition，需要用其他样式替代；整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。
鼠标一离开导航菜单，二级菜单就隐藏，移不到二级菜单
weixin_42733744的博客
04-12 2360
项目场景： 提示：这里简述项目相关背景： 例如：项目场景：示例:网站右侧导航，无法移入二级菜单，鼠标移出一级菜单，二级内容立刻消失，从而鼠标无法移入二级内容区域。 类似优快云官网右侧，鼠标hover到二维码图标后，显示左侧关注公众号和下载APP两个二维码，需求是解决鼠标无法移入到，左侧两个二维码区域 代码描述 提示：这里描述项目中遇到的问题： 例如：数据传输过程中数据不时出现丢失的情况，偶尔会丢失一部分数据 APP 中接收数据代码： <!DOCTYPE html> <html lang
html 二级菜单 鼠标移动消失,鼠标移开按钮时怎么不让二级菜单马上消失？
weixin_31776191的博客
06-04 800
这是我之前写的一个代码希望对你有所帮助，记得自己引入jq原始文件比如： ，之前的回答在 这里：https://segmentfault.com/q/1010000005890523/a-1020000005897412Document* {margin: 0;padding: 0;}body{width: 100%;height: 100%;background: #f88;}#box {hei...
鼠标移至二级菜单时一级菜单仍然保留停留样式.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>
用jquery实现：悬浮菜单栏，鼠标指向二级菜单的时候，一级菜单不消失
qq_43364342的博客
08-03 1772
` <style> * { padding: 0; margin: 0; } .body { height: 600px; width: 500px; border: 1px solid #00B0FF; margin: 50px ...
编写一个简单的css二级菜单，鼠标移动二级菜单就消失的问题
forever_ylx的专栏
12-23 2541
二级列表学习
jquery实现鼠标滑过显示二级下拉菜单效果
10-23
如果要处理鼠标移出一级菜单项时二级菜单项的隐藏逻辑，可以绑定`mouseout`事件。在`mouseout`事件的处理函数中，将二级菜单项的`display`属性重新设置为`none`，使其再次隐藏。为了防止鼠标在进入二级菜单项之前就...
鼠标经过显示二级菜单js特效
10-27
如果鼠标移出菜单项，并且没有指向二级菜单的其他元素，那么二级菜单将会延时后隐藏。 - `clear_delayhide()` 函数：用来清除之前由`resetit(e)`函数设置的延时隐藏操作。 - `contains_ns6(a, b)` 函数：用来检查...
鼠标移到菜单上弹出二级菜单特效
04-12
在鼠标悬停事件中，如果立即弹出二级菜单，可能会因为用户的鼠标快速移动导致菜单频繁闪烁。为了解决这个问题，开发者可以设置一个短暂的延迟，在这段时间内如果鼠标仍然停留在主菜单上，才显示二级菜单。这样可以...
当鼠标移出灰色区域时候,菜单项怎么隐藏起来
10-30
例如，在本例中，我们需要实现一个功能：当鼠标移出预先设定的灰色区域时，原本显示的菜单项会自动隐藏起来。下面将详细解析如何通过HTML、CSS及JavaScript来完成这一功能。 #### HTML结构定义 首先，我们需要构建...
弹出二级导航栏后鼠标移入导航栏不消失
returnadsss的博客
01-28 1809
最近在仿百度网页来练习css和js,遇到一个问题，如何让鼠标移到标题后弹出二级导航栏，这很容易实现，就是通过类似下文的代码： let moreBtn=document.getElementById("more"); let haBtn=document.getElementById("ha"); moreBtn.onmouseover=function(){ haBtn.style.display="block"; } moreBtn.onmouseout=function(){
elementui 导航菜单 嵌入组件时 鼠标移出弹窗之外，有时候弹窗没有关闭？
qq_38180363的博客
06-25 715
data() { inhistorypanel:false, // 增加一个变量用来判断鼠标是否在面板内 } chkIn() { this.inhistorypanel = true; }, chkOut(){ this.inhistorypanel = false; setTimeout(()=>{ if(!this...
html中二级菜单老是自动消失,下面这个导航在IE下鼠标移动到二级菜单的过程中二级菜单就消失了，请问有没有什么办法解决？...
weixin_42511702的博客
05-31 698
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 688
测试页面 第一个菜单 第一个菜单的子菜单 第一个菜单的子菜单 第一个菜单的子菜单 第二个菜单 第一个菜单的子菜单 第一个菜单的子菜单 第三个菜单 第四个菜单 第五个菜单...
【问题来了】怎么实现网站侧边菜单鼠标滑过展开二级菜单
小飞快跑的博客
04-08 990
项目场景： 一个通用的管理系统或者网站 问题描述： 实现网站侧边菜单鼠标滑过展开二级菜单，展开位置和一级菜单位置齐平，如果二级菜单太长了超出屏幕底部，就让二级菜单靠齐底部 原因分析： 效果炫酷，上效果 解决方案： 目前只是实现了一级菜单打开二级菜单，后续有机会实现打开三级菜单，代码如下： <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 7458
效果: 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 4257
javascript版下拉菜单的实现，鼠标事件，事件委托
html——bootstrap 下拉菜单的使用及实现悬停展开下拉菜单
知北行的博客
04-17 7320
1、我这里使用的bootstrap4.0版本，相比3.0版本，新版本在使用时要在头部引入第三方 Popper.js插件。 这里先放一下头部的所有引用： <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <sc...
实现二级菜单弹出特效的简单方法
它通常用于实现二级菜单在鼠标离开主菜单项后延迟消失的效果。 4. mousehover（鼠标悬停）：这个概念并不是一个标准的JavaScript事件，但它经常被用来描述mouseover和mouseout事件发生时的状态。在实际开发中，...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值