>  기사  >  웹 프론트엔드  >  用:hover伪类代替js的hover事件_html/css_WEB-ITnose

用:hover伪类代替js的hover事件_html/css_WEB-ITnose

WBOY
WBOY원래의
2016-06-24 11:43:051739검색

制作二级菜单要实现鼠标移动上去显示子菜单,鼠标移出子菜单隐藏,或者其他类似需求的地方,首先我会想到用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;}    

总结:有时候需要转换一下思维,找到实现问题最简单的方法,而不是一直纠结在问题中。

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.