hover用法实例

时间：2017-07-03 17:20:55 阅读：109 评论：0 收藏：0 [点我收藏+]

标签：utf-8 nbsp ansi logs blog cursor 20px pos 4.0

//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>

hover用法实例

标签：utf-8 nbsp ansi logs blog cursor 20px pos 4.0

原文地址：http://www.cnblogs.com/lwj820876312/p/7111894.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行