//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. RedHat Enterprise Linu…

    RedHat Enterprise Linux 6.4 使用Centos 6 的yum 源问题 2015.04.09 一.问题描述 有时在使用RedHat 系统进行安装某些软件时,会出现如下提示: T ...

  2. POJ 3669 Meteor Shower （BFS+预处理）

    Description Bessie hears that an extraordinary meteor shower is coming; reports say that these meteo ...

  3. attr(),addClass()使用方法练习

    这次我主要是想要完成2个li之间样式的变化.方法比较傻,如果有人有更好的办法或者有别问题,希望可以不吝指教. <!DOCTYPE html><html> <head> ...

  4. 含有n个元素的整型数组，将这个n个元素重新组合，求出最小的数，如{321,3,32}，最小的数为321323

    public class GetMinNumber { public static void main(String[] args) { String[] arr = null; System.out ...

  5. NYOJ--517--最小公倍数(大数打表)

    最小公倍数 时间限制:1000 ms  |  内存限制:65535 KB 难度:3   描述 为什么1小时有60分钟,而不是100分钟呢?这是历史上的习惯导致. 但也并非纯粹的偶然:60是个优秀的数字 ...

  6. 【NO.13】Jmeter - 在Linux整理和计算测试结果

    我们现在描述的是:在Linux系统使用Jmeter执行性能测试. 所以当执行完测试以后,就要计算一下测试结果,反馈给开发人员嘛. 在Linux系统使用Jmeter执行性能测试都包含哪些步骤,来,回顾一 ...

  7. sqlite 的基本使用1

    mac 下自带的sqlite3 直接在终端键入 sqlite3 即进入 sqlite的交互界面 1,创建数据库 sqlite3 命令 被用来创建新的数据库 比如sqlite3 mydb,即创建了一个m ...

  8. .NET并行处理和并发1-Threads and Theading

    线程是操作系统分配处理器时间的基本单元,并且进程中可以有多个线程同时执行代码. 每个线程都维护异常处理程序.调度优先级和一组系统用于在调度该线程前保存线程上下文的结构. 线程上下文包括为使线程在线程的 ...

  9. c++类与初始化，const

    --c++类与初始化,const --------------------------------2014/09/04 1. 类的定义(头文件.声明文件)看成类的外部接口,一般写成.h头文件. 2. ...

  10. 《Python学习手册》读书笔记【转载】

    转载:http://www.cnblogs.com/wuyuegb2312/archive/2013/02/26/2910908.html 之前为了编写一个svm分词的程序而简单学了下Python,觉 ...