//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. (转) Eclipse Maven 编译错误 Dynamic Web Module 3.1 requires Java 1.7 or newer 解决方案

    场景:在导入Maven项目时候遇到如下错误. 1 问题描述及解决 Eclipse Maven 开发一个 jee 项目时,编译时遇到以下错误:Description Resource Path Loca ...

  2. 【PHP】数据类型转换

    PHP的数据类型转换属于强制转换,允许转换的PHP数据类型有: (int).(integer):转换成整形 (float).(double).(real):转换成浮点型 (string):转换成字符串 ...

  3. 【javascript】回调函数

    1. 定义 回调函数,即当条件满足时执行的函数.有三种方法实现调用回调函数 call 1)call 用法:call(thisObj, Obj) 主要区别:call 方法会将函数对象上下文修改为this ...

  4. Hibernate的事务处理机制和flush方法的用法

    关于在使用hibernate在提交事务时常遇到的异常: an assertion failure occured (this may indicate a bug in Hibernate, but ...

  5. Redux源码分析之compose

    Redux源码分析之基本概念 Redux源码分析之createStore Redux源码分析之bindActionCreators Redux源码分析之combineReducers Redux源码分 ...

  6. Java中实现十进制数转换为二进制的三种思路

    Java中实现十进制数转换为二进制 第一种:除基倒取余法 这是最符合我们平时的数学逻辑思维的,即输入一个十进制数n,每次用n除以2,把余数记下来,再用商去除以2...依次循环,直到商为0结束,把余数倒 ...

  7. mysql5.7.18的安装与主从复制

    CentOS6.7安装mysql5.7.18 1.  解压到/usr/local目录 # tar -zxvf mysql-5.7.18-linux-glibc2.5-i686.tar.gz -C /u ...

  8. ABP+AdminLTE+Bootstrap Table权限管理系统第二节--数据库脚本

    第一点,上一篇文章中我们讲到codefirst中一些问题包括如图 1,codefirst在执行的数据库迁移过程中产生了很多文件,对于强迫症的我而言特别不爽,这些是可以不用生成的啊 2,在codefir ...

  9. Mysql元数据生成Hive建表语句注释脚本

    在将数据从Mysql 等其他关系型数据库 抽取到Hive 表中时,需要同步mysql表中的注释,以下脚本可以生成hive表字段注释修改语句. 注:其他关系型数据库如:oracle 可以通过相同的思路, ...

  10. CgLib动态代理学习【Spring AOP基础之一】

    如果不了解JDK中proxy动态代理机制的可以先查看上篇文章的内容:Java动态代理学习[Spring AOP基础之一] 由于Java动态代理Proxy.newProxyInstance()的时候会发 ...