用:hover伪类代替js的hover事件
2015-06-09 10:22
225 查看
制作二级菜单要实现鼠标移动上去显示子菜单,鼠标移出子菜单隐藏,或者其他类似需求的地方,首先我会想到用jquery的hover事件来实现,如:
第一个function实现鼠标移上去的样式,第二个function实现鼠标移开的样式,于是就实现了简单的下拉菜单功能。
之前一直这样做没有任何问题,然而直到昨天遇到一个问题:元素已经有click事件实现此功能时,再用hover事件实现一样的功能,hover就会影响click事件,并去掉点击事件的功能。举个例子:
一个导航,为当前点击的导航添加current样式,然后要实现鼠标移动到的当前元素也添加current事件,这时再用hover事件,通过点击添加的current样式会被hover事件影响,并且再次点击添加样式无效。
:hover伪类
纠结了半天,请教了一下同事,同事说没有必要用hover事件啊,用伪类一下就解决了,于是在她的指导下豁然开朗。
current是当前需要的样式,然后利用:hover与current共用一个样式,简单的一个思路的转换就能解决问题了。同理,菜单显示问题:
总结:有时候需要转换一下思维,找到实现问题最简单的方法,而不是一直纠结在问题中。
$(".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; }
总结:有时候需要转换一下思维,找到实现问题最简单的方法,而不是一直纠结在问题中。
相关文章推荐
- JS计算字符串所占字节数
- js控制键盘按键(回车、空格
- 简介JavaScript中的push()方法的使用
- js 日期控件WdatePicker设置最小时间
- D3js-绘制SVG
- JavaScript中pop()方法的使用教程
- jsp基础
- JavaScript原型链和instanceof运算符的暧昧关系
- JavaScript 怪癖
- 在JavaScript中操作数组之map()方法的使用
- <a href="javascript:;" ></a>
- D3js-SVG简单初步
- JS回到顶部按钮
- ES6 JavaScript Promise的感性认知
- JavaScript中join()方法的使用简介
- 非常简单的js双向绑定框架(一)
- checkbox属性checked="checked"通过js已设置,但是不勾选
- 认识ExtJs的开发包(基础必备)
- 了解JSONP
- 【最小生成树+贪心】BZOJ1821: [JSOI2010]Group 部落划分 Group