制作二级菜单要实现鼠标移动上去显示子菜单，鼠标移出子菜单隐藏，或者其他类似需求的地方，首先我会想到用jquery的hover事件来实现，如：
$(".nav").hover(function(){ $("sub-nav").addClass("show");},function(){ $("sub-nav").removeClass("show");});第一个function实现鼠标移上去的样式，第二个function实现鼠标移开的样式，于是就实现了简单的下拉菜单功能。
之前一直这样做没有任何问题，然而直到昨天遇到一个问题：元素已经有click事件实现此功能时，再用hover事件实现一样的功能，hover就会影响click事件，并去掉点击事件的功能。举个例子：
一个导航，为当前点击的导航添加current样式，然后要实现鼠标移动到的当前元素也添加current事件，这时再用hover事件，通过点击添加的current样式会被hover事件影响，并且再次点击添加样式无效。
立即学习“前端免费学习笔记（深入）”；
：hover伪类
纠结了半天，请教了一下同事，同事说没有必要用hover事件啊，用伪类一下就解决了，于是在她的指导下豁然开朗。
.nav li.current,.nav li:hover{ //css code }current是当前需要的样式，然后利用:hover与current共用一个样式，简单的一个思路的转换就能解决问题了。同理，菜单显示问题：
.nav:hover .sub-nav{ display:block;} 总结：有时候需要转换一下思维，找到实现问题最简单的方法，而不是一直纠结在问题中。
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
613
