//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用法实例的更多相关文章

  1. php中的curl使用入门教程和常见用法实例

    摘要: [目录] php中的curl使用入门教程和常见用法实例 一.curl的优势 二.curl的简单使用步骤 三.错误处理 四.获取curl请求的具体信息 五.使用curl发送post请求 六.文件 ...

  2. 上传文件及$_FILES的用法实例

    Session变量($_SESSION):�php的SESSION函数产生的数据,都以超全局变量的方式,存放在$_SESSION变量中.1.Session简介SESSION也称为会话期,其是存储在服务 ...

  3. C++语言中cin cin.getline cin.get getline gets getchar 的用法实例

    #include <iostream> #include <string> using namespace std; //关于cin cin.getline cin.get g ...

  4. Union all的用法实例sql

    ---Union all的用法实例sqlSELECT TOP (100) PERCENT ID, bid_user_id, UserName, amount, createtime, borrowTy ...

  5. 【转】javascript入门系列演示·三种弹出对话框的用法实例

    对话框有三种 1:只是提醒,不能对脚本产生任何改变: 2:一般用于确认,返回 true 或者 false ,所以可以轻松用于 if...else...判断 3: 一个带输入的对话框,可以返回用户填入的 ...

  6. php strpos 用法实例教程

    定义和用法该strpos ( )函数返回的立场,首次出现了一系列内部其他字串. 如果字符串是没有发现,此功能返回FALSE . 语法 strpos(string,find,start) Paramet ...

  7. 【JSP】三种弹出对话框的用法实例

    对话框有三种 1:只是提醒,不能对脚本产生任何改变: 2:一般用于确认,返回 true 或者 false ,所以可以轻松用于 if...else...判断 3: 一个带输入的对话框,可以返回用户填入的 ...

  8. python多线程threading.Lock锁用法实例

    本文实例讲述了python多线程threading.Lock锁的用法实例,分享给大家供大家参考.具体分析如下: python的锁可以独立提取出来 mutex = threading.Lock() #锁 ...

  9. jQuery中on()方法用法实例详解

    这篇文章主要介绍了jQuery中on()方法用法,实例分析了on()方法的功能及各种常见的使用技巧,并对比分析了与bind(),live(),delegate()等方法的区别,需要的朋友可以参考下 本 ...

随机推荐

  1. POI读取excel工具类 返回实体bean集合(xls,xlsx通用)

    本文举个简单的实例 读取上图的 excel文件到 List<User>集合 首先 导入POi 相关 jar包 在pom.xml 加入 <!-- poi --> <depe ...

  2. 【SignalR学习系列】8. SignalR Hubs Api 详解（.Net C# 客户端）

    建立一个 SignalR 连接 var hubConnection = new HubConnection("http://www.contoso.com/"); IHubProx ...

  3. C#多线程之旅(7)——终止线程

    先交代下背景,写<C#多线程之旅>这个系列文章主要是因为以下几个原因:1.多线程在C/S和B/S架构中用得是非常多的;2.而且多线程的使用是非常复杂的,如果没有用好,容易造成很多问题.   ...

  4. CentOS 7 安装Subversion, 并用Nginx代理

    环境:CentOS 7.3.1611 分三步:第一步:安装subversion第二步:安装httpd第三步:安装nginx 操作步骤: 安装subversion, 命令 -> yum -y in ...

  5. Alluxio 1.5集群搭建

    一.依赖文件安装 1.1 JDK 参见博文:http://www.cnblogs.com/liugh/p/6623530.html 二.文件准备 2.1 文件名称 alluxio-1.5.0-hado ...

  6. nginx的平滑升级

    一:解释nginx的平滑升级 随着nginx越来越流行,并且nginx的优势也越来越明显,nginx的版本迭代也来时加速模式,1.9.0版本的nginx更新了许多新功能,例如stream四层代理功能, ...

  7. Java集合框架Collections【List/Set】

    1.基本介绍: 集合就是存放对象的,他比数组好的一点就是他一开始不清楚自己长度 容器一般是分为很多种的,很多的容器在一起然后进过断的抽象和抽取就成了一个体系,我们称之为集合框架 我们看体系首先是看顶层 ...

  8. React Native 系列(四) -- 布局

    前言 本系列是基于React Native版本号0.44.3写的.RN支持CSS中的布局属性,因此可以使用CSS布局属性,这里就不详细地讲解了,这篇文章的重点主要是讲述一下RN中的Flex布局. CS ...

  9. Oracle中dblink如何使用

    Oracle中dblink应用小结Oracle应用服务器OS   1.查看数据库的global_name        SELECT * FROM GLOBAL_NAME;    2.查看global ...

  10. 605. Can Place Flowers种花问题【leetcode】

    Suppose you have a long flowerbed in which some of the plots are planted and some are not. However, ...