基于hover的用法实例(推荐)

2019-11-19 16:11:11

字体：大中小

来源：转载

供稿：网友

//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="#" 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>  </div></div></body></html>

以上这篇基于hover的用法实例(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持武林网。

上一篇：JavaScript中document.referrer的用法详解

下一篇：js学习总结_基于数据类型检测的四种方式(必看)