当鼠标光标移出导航父项目时，子菜单消失 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

ReactPortals传送门

MouseEnter: 当鼠标光标进入一个元素时触发，该事件仅在鼠标从元素的外部进入时触发，不会对元素内部的子元素产生影响。...MouseLeave：当鼠标光标离开一个元素时触发，该事件仅在鼠标从元素内部离开时触发，不会对元素外部的父元素产生影响。...MouseOver: 当鼠标光标进入一个元素时触发，该事件在鼠标从元素的外部进入时触发，并且会冒泡到父元素。...MouseOut: 当鼠标光标离开一个元素时触发，该事件在鼠标从元素内部离开时触发，并且会冒泡到父元素。...避免重复触发: MouseOver和MouseOut事件在鼠标悬停在元素内部时会重复触发，当鼠标从一个元素移动到其子元素时，MouseOut事件会在父元素触发一次，然后在子元素触发一次，MouseOut

1.4K5 0

jQuery特效 | 导航底部横线跟随鼠标缓动

功能需求明确横向导航条；当鼠标移入导航区域的时候，在当前导航底部淡入一个横线；当鼠标在导航区域当中左右移动时，横线跟随鼠标移动；当鼠标移出导航区域的时候，横线淡出。...样式处理针对父级元素进行相对定位设置，针对子级元素（横线）设置绝对定位，并且设置left和bottom的值针对每个导航元素进行样式设置，需要注意的是，针对“当前”导航，需要给出不同于其他元素的样式（...功能逻辑当鼠标移入具体每个导航时，设置“横线”的left值，使用animate方法实现其缓动的效果。当鼠标移入移出整个导航条时，再控制横线的显示与隐藏。 ?...$(ele).hover(function(){ // 鼠标移入时要执行的内容 }, function(){ // 鼠标移出时要执行的内容 }) animate 与 stop animate用于指定某个或某些属性发生动态效果的变化...offsetLeft 与 position()方法 offsetLeft是JavaScript原生方法，ele.offsetLeft中，ele表示具体元素，元素的offsetLeft属性，表示该元素左侧与父级元素的距离

10.4K5 0

您找到你想要的搜索结果了吗？

是的

没有找到

jQuery练习——下拉菜单

第一期——下拉菜单的实现 ---- 文章目录整体效果图一、HTML样式二、CSS样式三、jQuery代码总结 ---- 整体效果图实现效果：当鼠标移到不同的一级菜单，会显示相应的二级菜单，...鼠标移走，二级菜单消失。...---- 一、HTML样式当我们在做导航栏、少量数据表格、层级列表时，使用无序列表ul、li可以实现想要的效果。这里我们先用无序列表ul、li完成页面结构，为每一个元素添加a标签，即超链接。...使用:hover设置鼠标指针浮动在文字上面的效果，即当鼠标移入，背景颜色改变。...使用选中ul和li ，为其添加鼠标移入和移出的函数，即mouseover和mouseout。接着用.children获取下拉列表中要显示的元素，也就是nav的子元素。

29.4K2 0

JavaScript—事件

当鼠标的光标移动进按钮时会触发mouseover事件，移动出按钮时会触发mousseout事件，然后就会调用委托到事件中的函数代码，函数被调用执行就会在控制台中输出这些信息。...所谓焦点就是鼠标的光标的位置，例如当你在文本框输入文字时需要点击一下文本框才能输入，这就是要让文本框获得鼠标焦点。...addEventListener函数还有一个布尔参数，这个参数定义着父元素和子元素重叠并且都有委托事件的情况时，是先触发父元素的事件还是先触发子元素的事件，参数值为true是定义先触发父元素的事件，参数值为...还有一种情况就是父元素和子元素不完全重叠，这种情况下不定义addEventListener函数的布尔值，当鼠标移动到子元素时先触发父元素的事件，然后移出子元素时先触发子元素的事件再触发父元素的事件，这是因为默认情况下子元素的事件先执行...定义addEventListener函数的布尔值为true的话，当鼠标移动到子元素时先触发父元素的事件，然后移出子元素时还是触发父元素的事件，最后才触发子元素的事件，这是因为布尔值为true的情况下父元素的事件先执行

2.1K2 0

记一个“奇葩”需求的实现

2、需求：导航菜单（el-menu组件）竖向展示的鼠标移入一级菜单展示下面的子菜单，移出则收起来（手风琴模式，正常状态下只保持一个菜单处于展开状态，手动鼠标悬浮展开的不算）选中某个子菜单时高亮对应的一级菜单...，并且当鼠标移出高亮的这个菜单模块时不折叠，但是可以点击一级菜单进行折叠（注意：跟第一条有区别） 3、问题： element-ui的导航组件子菜单打开的触发方式可以通过 menu-trigger...（只能自己修改了） unique-opened 参数可以控制是否只保持一个子菜单展开，但是在没有子菜单的情况下失效（需要手动修改） 4、思路分析：导航菜单使用递归el-submenu组件实现...鼠标滑动展开关闭需求： el-submenu 组件编写鼠标移入移出事件（mouseenter、mouseleave），拿到indexPath，调用open和close方法打开或者折叠菜单（注意：没有子菜单的一级菜单鼠标移入移出不做处理...el-submenu 组件 menuEnter() { // isNest 是否还有子菜单 true:没有子菜单 false:有子菜单 if (!

9391 0

【从零开始的Qt开发指南】（十六）Qt 事件入门：从原理到实战，掌握事件处理的核心秘诀

、快捷键操作、键盘导航等功能窗口相关事件窗口显示 / 隐藏、窗口移动、大小改变、焦点变化窗口被打开 / 关闭、用户拖动窗口改变位置、拉伸窗口改变大小、键盘焦点切换处理窗口状态变化，如窗口大小改变时调整组件布局...例如，鼠标点击事件会传递给鼠标光标所在的组件，键盘事件会传递给当前拥有键盘焦点的组件。事件处理：目标组件收到事件后，会通过特定的方式处理事件（如重写事件处理函数）。...2.2 实战案例 1：鼠标进入 / 离开事件 —— 实现组件 hover 效果在很多 GUI 应用中，我们希望组件在鼠标移入时改变样式（如按钮变色、显示提示信息），鼠标移出时恢复原样。...它们的函数原型分别如下所示：步骤 1：创建 Qt 项目并设计 UI 首先新建一个 Qt Widgets Application 项目，基类选择QWidget，并勾选 "Generate...，当鼠标移入 Label 区域时，应用程序输出栏打印 "鼠标进入"；当鼠标移出时，输出栏打印 "鼠标离开"。

2952 1

ReleaseCapture 以及 SetCapture 函数及其应用

一旦窗口捕获了鼠标，所有鼠标输入都针对该窗口，无论光标是否在窗口的边界内。同一时刻只能有一个窗口捕获鼠标。...如果鼠标光标在另一个线程创建的窗口上，只有当鼠标键按下时系统才将鼠标输入指向指定的窗口。...其中一个应用：如果鼠标在窗口上，那么窗口就显示，如果鼠标移出窗口，那么窗口则消失，这种应用场景很适合tip。...我们可以在窗口的OnMouseMove函数内，调用SetCapture,而在当鼠标不在当前窗口的显示范围内时(因为窗口已经SetCapture了，所以不在窗口内的鼠标消息窗口也可以收到)，调用ReleaseCapture

5852 0

jQuery二级菜单的显示隐藏

子菜单项2 菜单项2 ...子菜单项3 子菜单项4 ...上述示例中，我们创建了一个包含两个菜单项和对应的二级菜单的导航栏。...然后，通过为父级菜单项设置:hover伪类选择器，当鼠标悬停在菜单项上时，显示相应的二级菜单。...当鼠标进入菜单项时，使用slideDown()方法显示相应的二级菜单。当鼠标离开菜单项时，使用slideUp()方法隐藏二级菜单。

5.8K3 0

jQuery学习笔记

checkbox：可以选择复选框，和input[type=checkbox]一样； :radio：可以选择单选框，和input[type=radio]一样； :focus：可以选择当前输入焦点的元素，例如把光标放到一个...上，用$('input:focus')就可以选出； :checked：选择当前勾上的单选框和复选框，用这个选择器可以立刻获得用户选择的项目，如$('input[type=radio]:checked...查找子父节点 $('h3').parent().css() //查找h3父元素 $('h3').sliblings()//所有兄弟节点 $('h3').nextAll()//当前节点后面所有兄弟节点 $...remove()删除DOM节点事件 jQuery很多时候需要绑定事件来出发一些东西 on方法用来绑定一个事件 onclick //鼠标单机时触发 onmousemove //当鼠标指针移动到元素上时触发...onmouseout //当鼠标指针移出元素时触发点我试试 var a = $('#test-link');

1.7K4 0

制作滑动条菜单，如何延时处理滑动效果，避免动画卡顿

前几日在利用JQuery做菜单滑动标记这个效果的时候，最后发现滑动条在我用鼠标快速滑动的时候，会出现滑动条延迟滑动，并且有卡顿的现象,相当影响体验感受。...思路：在鼠标移入目标元素的时候，启用定时操作，我目前设置的为1/10秒，也就是说，当鼠标如果在目标元素区域停留了满足我预设值的时间范围内的话，我就执行动画效果，否则没有达到预设值的时间范围便移出来目标元素的话...> 6: 　 7: 未添加延时操作的JS代码： 1: 2: //导航菜单一监听...animate({left:$(ele).offset().left}); 8: }, 100); 9: }).mouseout(function() { 10: //当鼠标移出目标元素时...以上demo 和上面的那个例子只是延时处理的一种情况，其实在做很多导航滑动，向下滑动菜单效果，滚动条滑动等等效果的的时候我们经常会遇见，但是解决思路都是相同的。增加延迟处理，终止事件。

2.3K2 0

【原型设计】如何利用Axure实现下拉子菜单？

Step 5 按上述步骤把其余两个菜单及其子菜单编辑好。 ? Step 6 接下来需要对菜单进行状态切换的配置了，选择菜单【模板管理】，双击右边的【鼠标单击时】。 ?...Step 9 此时预留效果，已经能将第一个菜单的子菜单通过鼠标点击的方式进行展开了。 ? Step 10 上面已经完成了点击鼠标把子菜单下拉出来的效果，接下来我们需要配置鼠标移出时将菜单收起的效果。...在右边栏的【更多事件】中，选择【鼠标移出时】。 ? ? Step 11 按刚才同样的方式进行配置事件。 ? ?...Step 12 截止目前的配置，已经完成了第一个菜单的下拉效果了：鼠标点击【模板管理菜单】会把子菜单展开，鼠标移出时，子菜单则自动收回。 ?...至此，我们就实现了下拉子菜单的效果，当鼠标点击主菜单时，将下拉出相应的子菜单，当鼠标移出主菜单区域时，自动收起子菜单。出品：嘉为科技

6.6K2 0

Axure导航二级菜单

效果：当鼠标移入或者单击“权限管理”时，“权限管理”填充色由蓝变为白，字体由白变成黑。同时，弹出两个子选项“账号管理”和“设备管理”，当鼠标移入子选项时，该子选项背景变为灰白色。...当鼠标移出母选项和子选项时，弹框隐藏，同时母选项背景和字体颜色恢复原状。...原型设计：（1）设置元件的选中状态（2）设置鼠标移入或移出该组件的事件为了更好设计逻辑，我们采用触发的方式，新增一个触发元件event_authority （3）添加交互用例至此，我们的导航栏就设计完成了

7.3K2 0

简述鼠标事件onmouseover、onmouseout 与 onmouseenter、onmouseleave 的区别

onmouseout 当鼠标指针从元素移动出来时，会触发 onmouseout 事件。这两种事件不仅会在鼠标指针直接经过元素时触发，而且当鼠标指针经过元素的子元素时也会触发。...() { console.log('鼠标移出父元素'); }接下来是另外两个事件 onmouseenter 和 onmouseleaveonmouseenter 当鼠标指针移动到元素上时...onmouseleave 当鼠标指针从元素移动出来时，会触发 onmouseleave 事件。与前两者不同，这两种事件仅在鼠标指针直接经过元素时触发，而不会在鼠标指针经过元素的子元素时触发。...() { console.log('鼠标移出父元素'); }2....这意味着当你使用这些事件时，它们只会在指定的元素上触发，而不会影响到其他元素。特别是 onmouseleave，它不会在子元素上触发，也不会冒泡到父元素。

2.8K1 1

前端基础-CSS常用选择器

3.子元素选择器（掌握）选择元素的直接子元素，父和子之间用 > 隔开：父元素>子元素{css样式} 示意图 ? 案例题： <!...在不修改以上代码的前提下，完成以下任务：链接登录的颜色为红色,同时主导航栏里面的所有的链接改为黄绿色 (简单) 主导航栏和侧导航栏里面文字都是14像素并且是微软雅黑。...（中等) 主导航栏里面的一级菜单链接文字颜色为绿色。（难) 4.相邻元素选择器（了解）选择相邻的元素，两个元素中间用 + 隔开：元素1 + 元素2{css样式} 示意图 ?...5.伪类元素:link 正常连接时候的状态元素:visited 点击以后的状态元素:hover 当鼠标移动上去的状态-------重点、常用元素:active...当鼠标按下去时候的状态注意：不是所有元素都支持这4种写法，超链接支持4种，工作中用的hover比较多，别的可以做个了解

7532 0

js 鼠标事件总结

当监听鼠标事件时，会触发一些事件，我们可以与之交互： mousedown 按下鼠标按钮触发 mouseup 鼠标按钮被释放 click 点击事件 dblclick 双击事件 mousemove 当鼠标移动到元素上时...，鼠标移动 mouseover 当鼠标移动到一个元素或它的一个子元素上时，鼠标悬停。...mouseenter 当鼠标移动到一个元素上时，鼠标进入。类似于mouseover但不冒泡。 mouseout 当鼠标移出元素时，以及当鼠标进入子元素时。...mouseleave 当鼠标移出一个元素时，mouseleave。类似于mouseout但不冒泡。 contextmenu 快捷菜单当快捷菜单打开时，例如用鼠标右键点击事件重叠。...ctrlKey 如果在事件触发时按下ctrl键，则ctrlKey为真。 metaKey 如果事件触发时按下了meta键，则metaKey true。

12.2K4 0

让剁手党洞察物体细节，“放大镜”当之无愧

，会发生mouseover事件 onmouseout: 当鼠标指针从元素上移开时，发生mouseout事件 onmousemove: 当鼠标指针在指定的元素中移动时，就会发生mousemove事件 3、...当鼠标移动到原图上时，通过对大图进行位置控制来显示对应的部位。 2....当鼠标移动到box上方时，move块将显示，同时在放大区中显示大图的对应位置，所以我们在这里需要使用mousemove事件监听，当我们鼠标移入box时，就需要获取当前鼠标的相对坐标位置。...- (mov.offsetWidth / 2); //获取移动时move块距父级的顶部距离 4.临界值判断，当move的移动距离超出了box的范围时，需要限制其最大移动值与最小移动值。...mouseove触发，放大区显示，移出时，使用mouseout，move块与放大区消失。

1.7K8 0

纵向、横向导航菜单及二级弹出菜单

我们要实现的效果是子菜单不占据空间，所以可以使用position:absolute;让子元素脱离文档流，使用left和top属性确定子菜单相对于父级菜单的位置。...display:none;不显示元素 display:block;可以将行内标签变为块标签，占据一行 display:inline;可以将块标签变为行内标签，占据一行内的一部分位置我们需要实现，当鼠标悬浮到父级菜单上时显示子菜单...，当鼠标离开父级菜单时隐藏子菜单，因此可以使用display的none属性隐藏菜单，当鼠标移动到父级菜单上时使用display:block显示菜单。.../*鼠标移动到父级菜单时显示子菜单*/ #menu ul li:hover ul{display:block;} 最后的页面代码如下： <%@ page language="java" import=...:absolute;left:100px;top:0px;width:100px;border:1px solid #CCC;} /*鼠标移动到父级菜单时显示子菜单*/ #menu ul li:

6.6K3 0

CSS transition delay简介与进阶应用

背景在日常的项目开发中，我们会很经常的遇见如下的需求：在浏览器页面中，当鼠标移动到某个部分后，另一个部分在延迟若干时间后出现在鼠标移除该区域后，另一部分也在延迟若干时间后消失我相信这是一个很常见的一个需求...但是，问题也出现了，在鼠标移出的时候，div2立马就消失了。让我们来分析一下鼠标移入和移出时的效果。...当鼠标移入时：鼠标移入div1元素触发了hover事件，div2的visibility属性变为visible transition属性让opacity属性从0变为1 而当鼠标移出时：鼠标移出div1...当时鼠标移入时：鼠标移入div1元素触发hover事件 transition属性让opacity属性从0变为1 visibility属性变为visible 当鼠标移出时：鼠标移出div1元素 hover...属性让opacity属性由0变为1 当鼠标移出时：鼠标移出div1 hover事件停止触发，transition延时恢复到0.5s，因此visibility属性不会马上触发 transition属性让

2.5K2 1

mouseenter与mouseover为何这般纠缠不清？

大概意思是说：当鼠标从元素的边界之外移入元素的边界之内时，事件被触发。而当鼠标本身在元素边界内时，要触发该事件，必须先将鼠标移出元素边界外，再次移入才能触发。(英语比较渣?...我们给左右两边的ul分别添加了mouseover和mouseenter事件，当鼠标进入左右两边的ul时，mouseover和mouseenter事件都触发了，但是当移入各自的子元素li的时候，触发了左边..., 其实不一定，后面会说明)，或者ul元素本身(在其子元素上移出时)，又或者是子元素本身(直接从子元素A移动到子元素B)。...wrap(移入ul时,此时也是触发mouseenter事件的时候, 其实不一定，后面会说明)，或者ul元素本身(在其子元素上移出时)，又或者是子元素本身(直接从子元素A移动到子元素B)。...，也不是目标元素的子元素，就说明鼠标已移出目标元素我们同样可以用上面封装的函数完成 // callback表示如果执行mouseenter事件时传入的回调函数 let emulateEnterOrLeave

1K1 0

mouseenter与mouseover为何这般纠缠不清？

大概意思是说：当鼠标从元素的边界之外移入元素的边界之内时，事件被触发。而当鼠标本身在元素边界内时，要触发该事件，必须先将鼠标移出元素边界外，再次移入才能触发。(英语比较渣?...我们给左右两边的ul分别添加了mouseover和mouseenter事件，当鼠标进入左右两边的ul时，mouseover和mouseenter事件都触发了，但是当移入各自的子元素li的时候，触发了左边..., 其实不一定，后面会说明)，或者ul元素本身(在其子元素上移出时)，又或者是子元素本身(直接从子元素A移动到子元素B)。...wrap(移入ul时,此时也是触发mouseenter事件的时候, 其实不一定，后面会说明)，或者ul元素本身(在其子元素上移出时)，又或者是子元素本身(直接从子元素A移动到子元素B)。...，也不是目标元素的子元素，就说明鼠标已移出目标元素我们同样可以用上面封装的函数完成 // callback表示如果执行mouseenter事件时传入的回调函数 let emulateEnterOrLeave

2K7 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭