//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. Experience of Python Learning Week 1

    1.The founder of python is Guido van Rossum ,he created it on Christmas in 1989, smriti of ABC langu ...

  2. Hive笔记——技术点汇总

    目录 · 概况 · 手工安装 · 引言 · 创建HDFS目录 · 创建元数据库 · 配置文件 · 测试 · 原理 · 架构 · 与关系型数据库对比 · API · WordCount · 命令 · 数 ...

  3. 带你快速进入.net core的世界

    [申明]:本人.NET Core小白.Linux小白.MySql小白.nginx小白.而今天要说是让你精通Linux ... 的开机与关机.nginx安装与部署.Core的Hello World .. ...

  4. matplotlib实现数据可视化

    一篇matplotlib库的学习博文.matplotlib对于数据可视化非常重要,它完全封装了MatLab的所有API,在python的环境下和Python的语法一起使用更是相得益彰. 一.库的安装和 ...

  5. swift 获取文件大小

    //获取文件大小 func getSize(url: URL)->UInt64 { var fileSize : UInt64 = 0 do { let attr = try FileManag ...

  6. NYOJ--95--multiset--众数问题

    /* Name: NYOJ--95--众数问题 Date: 20/04/17 16:02 Description: multiset水过 */ #include<set> #include ...

  7. HTML相关知识

    1 Day01HTML HTML5声明:<!doctype html> <html> 1.1 HTML基本结构: <head> <title>题目< ...

  8. Centos 7.3 安装mysql5.7.19 各种调试就不多说了

    mysql 5.7.19linux-glibc2.12 (x86_64) 安装 1.在安装目录进行解压2.mv解压目录为mysql3.创建mysql的用户 useradd -s /sbin/nolon ...

  9. 使用 ESXi 虚拟化 Ryzen 1700

    最近开发的一个项目,需要多台机器支持,PC + 各种虚拟机,整得很乱,一怒之下,购买一台Ryzen 1700 + 32GB机器自行搭建服务器.经历两天时间,不停的踩坑,终于完成: Ryzen 1700 ...

  10. 再学ajax--第一天

    今天写这个帖子就是是前几天在学ES6在学到Promise实现AJAX操作时,发现对ajax的一些知识点有些遗忘,所以就回头重新复习了一遍ajax,温故而知新. 主要有从4个方面去复习ajax,分析不透 ...