zoukankan      html  css  js  c++  java
  • 用:hover伪类代替js的hover事件

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

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

  • 相关阅读:
    Android 9.png图片制作
    Android 基于Socket的聊天室
    poj 1659 Frogs' Neighborhood
    zoj 2836 Number Puzzle
    zoj 1372 Networking
    hdoj 4259 Double Dealing
    Direct2D (33) : 通过 ID2D1BitmapRenderTarget 绘制背景网格
    Direct2D (36) : RenderTarget.DrawText() 与 IDWriteTextFormat
    Direct2D (35) : 通过 DirectWrite 获取字体列表
    Direct2D (37) : 使用不同画刷绘制文本
  • 原文地址:https://www.cnblogs.com/huangxi/p/4562735.html
Copyright © 2011-2022 走看看