首頁 > 文章 > web前端 > hover的用法實例總結

hover的用法實例總結

小云云原創: 2018-01-06 09:11:112574瀏覽

本文主要為大家帶來一篇基於hover的用法實例(推薦)。小編覺得蠻不錯的，現在就分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。

//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>
<p id="nav">
  <p class="navsBox">
    <p class="firstNav">购物特权</p>
    <ul>
      <li class="jedh"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >全额兑换</a></li>
      <li class="jlbbyk"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >俱乐部包邮卡</a></li>
      <li class="jwljb"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >购物领金币</a></li>
      <li class="mrljb"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >每日领金币</a></li>
      <li class="vipjtj"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >VIP阶梯价</a></li>
    </ul>
  </p>
</p>
</body>
</html>

hover的用法實例總結

相關文章