hover用法实例

最新推荐文章于 2024-10-04 19:51:04 发布

会做饭的技术男

最新推荐文章于 2024-10-04 19:51:04 发布

阅读量521

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog.php?id=hjijc0h11jaa&title=hover%E7%94%A8%E6%B3%95%E5%AE%9E%E4%BE%8B

版权

前端专栏收录该内容

2507 篇文章 13 订阅

订阅专栏

//hover,鼠标移入移出的另一种用法

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>左导航特效</title>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
            font-size: 12px;
        }
        #nav .navsBox {
            width: 160px;
        }
        #nav .navsBox .firstNav {
            height:45px;
            line-height:45px;
            background-color:#EBEBEB;
            border-left:10px solid #FE705C;
            padding-left:20px;
            width:130px;
            font-weight:bold;
            cursor: pointer;
        }
        #nav .navsBox ul {
            display:none;
            list-style:none;
        }
        #nav .navsBox ul li {
            display:block;
            height:45px;
            line-height:45px;
            padding-left:70px;
            width:90px;
            background-color:#F2F2F2;
            background-position:33px 7px;
            background-repeat:no-repeat;
        }
        #nav .navsBox ul li.jedh {
            background-image:url("./images/huan.gif");
        }
        #nav .navsBox ul li.jlbbyk {
            background-image:url("./images/you.gif");
        }
        #nav .navsBox ul li.jwljb {
            background-image:url("./images/gouwu.gif");
        }
        #nav .navsBox ul li.mrljb {
            background-image:url("./images/meiri.gif");
        }
        #nav .navsBox ul li.vipjtj {
            background-image:url("./images/zhe.gif");
        }
        #nav .navsBox ul li.onbg {
            background-color:#F9DBD1;
        }
        #nav .navsBox ul li a {
            color:#000;
            text-decoration:none;
        }
    </style>
    <script src="js/jquery-1.11.3.min.js"></script>
    <script>
        $(function () {
            $(".firstNav").click(function () {
                var $ul= $(this).next();
              if($ul.is(":visible")){
                  $ul.hide();
              }else{
                  $ul.show();
                  $ul.children().hover(function () {
                      $(this).addClass("onbg");
                  },function () {
                      $(this).removeClass("onbg")
                  })
              }
            })
        })
    </script>

</head>
<body>
<div id="nav">
    <div class="navsBox">
        <div class="firstNav">购物特权</div>
        <ul>
            <li class="jedh"><a href="#">全额兑换</a></li>
            <li class="jlbbyk"><a href="#">俱乐部包邮卡</a></li>
            <li class="jwljb"><a href="#">购物领金币</a></li>
            <li class="mrljb"><a href="#">每日领金币</a></li>
            <li class="vipjtj"><a href="#">VIP阶梯价</a></li>
        </ul>
    </div>
</div>
</body>
</html>