//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. 内核对象kobject和sysfs（4）——kset分析

    内核对象kobject和sysfs(4)--kset分析 从狭义上来说,kset就是kobj的一个再封装而已.在封装之后,提供了针对kset之下所有kobj统一管理的一些方法. 我们还是从结构说起: ...

  2. HDU - 3853

    LOOPS Time Limit: 15000/5000 MS (Java/Others)    Memory Limit: 125536/65536 K (Java/Others)Total Sub ...

  3. Jenkins发布MVC应用程序

    一个大的项目一般都会进行模块化.层次化分隔,每个模块.每个层次都可能是一个或多个工程文件组成,而且各个模块都有依赖关系,有先后顺序,先build哪个然后再build哪个都是有顺序的,如果想build一 ...

  4. Redis-位图法实现简单统计

    比如一个网站有1亿个用户, 现在要统计一周内连续登录的用户 方法: 可以用一个字节8个位表示7个人, 首位不算固定为0, 若某人周一登录则置为1, 没登录则为0 127.0.0.1:6379> ...

  5. 双向循环链表（C语言描述）（一）

    双向循环链表是链表的一种,它的每个节点也包含数据域和指针域.为了方便程序维护,可以单独为数据域定义一种数据类型,这里以整型为例: typedef int LinkedListData; 双向循环链表( ...

  6. 超强、超详细Redis数据库入门教程(转载)

    这篇文章主要介绍了超强.超详细Redis入门教程,本文详细介绍了Redis数据库各个方面的知识,需要的朋友可以参考下   [本教程目录] 1.redis是什么 2.redis的作者何许人也 3.谁在使 ...

  7. DHCP服务的部署和配置

    DHCP介绍: DHCP(动态主机配置协议)是一个局域网网络协议,使用UDP协议工作,主要用途:给局域网络或网络服务供应商自动分配IP地址, DHCP有3个端口,其中UDP67和UDP68为正常的DH ...

  8. NYOJ 71 独木舟上的旅行（贪心）

    独木舟上的旅行 时间限制:3000 ms  |  内存限制:65535 KB 难度:2   描述 进行一次独木舟的旅行活动,独木舟可以在港口租到,并且之间没有区别.一条独木舟最多只能乘坐两个人,且乘客 ...

  9. C语言开篇

    Linux下使用最广泛的C/C++编译器是GCC,大多数的Linux发行版本都默认安装,不管是开发人员还是初学者,一般都将GCC作为Linux下首选的编译工具. 1.小程序test_gets.c #i ...

  10. android学习笔记Fragment的使用

    Fragment的内容感觉好多啊,主要需要掌握Fragment静态加载,Fragment动态加载,Fragment的生命周期,Fragment与Activity的交互 1,Fragment的静态加载 ...