欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2022-06-03 14:00:08
//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>
<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的用法实例(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

上一篇： React学习笔记之事件处理（二）

下一篇： js获取地址栏参数的两种方法

推荐阅读