Home > Article > Web Front-end > Summary of usage examples of hover

Summary of usage examples of hover

小云云Original: 2018-01-06 09:11:112590browse

This article mainly brings you a usage example based on hover (recommended). The editor thinks it’s pretty good, so I’ll share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

//hover, another way to use the mouse to move in and out

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

Related recommendations:

hover selection in CSS Detailed explanation of the use of the handler

Detailed explanation of the conflict between hover and click events in jQuery (picture)

About toggle and hover in jQuery Detailed usage instructions

The above is the detailed content of Summary of usage examples of hover. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Several animation styles built into jQueryNext article：Several animation styles built into jQuery

See more

Summary of usage examples of hover

Related articles