编程 Javascript

基于hover的用法实例(推荐)

Posted in Javascript onJuly 04, 2017

//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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >全额兑换</a></li>
      <li class="jlbbyk"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >俱乐部包邮卡</a></li>
      <li class="jwljb"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >购物领金币</a></li>
      <li class="mrljb"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >每日领金币</a></li>
      <li class="vipjtj"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >VIP阶梯价</a></li>
    </ul>
  </div>
</div>
</body>
</html>

以上这篇基于hover的用法实例(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

基于hover的用法实例(推荐)

- Author -

jingxian

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

js loading加载效果实现代码

Nov 24 Javascript

将json当数据库一样操作的javascript lib

Oct 28 Javascript

javascript页面加载完执行事件代码

Feb 11 Javascript

JavaScript实现将xml转换成html table表格的方法

Apr 17 Javascript

基于Three.js插件制作360度全景图

Nov 29 Javascript

bootstrap中的 form表单属性role="form"的作用详解

Jan 20 Javascript

JavaScript、C# URL编码、解码总结

Jan 21 Javascript

JS脚本实现网页自动秒杀点击

Jan 11 Javascript

详解Vue开发微信H5微信分享签名失败问题解决方案

Aug 09 Javascript

解决axios会发送两次请求,有个OPTIONS请求的问题

Oct 25 Javascript

微信小程序bindinput与bindsubmit的区别实例分析

Apr 17 Javascript

node 文件上传接口的转发的实现

Sep 23 Javascript

js学习总结_基于数据类型检测的四种方式(必看)

Jul 04 #Javascript

DataTables添加额外的查询参数和删除columns等无用参数实例

Jul 04 #Javascript

javascript 初学教程及五子棋小程序的简单实现

Jul 04 #Javascript

基于Bootstrap分页的实例讲解(必看篇)

Jul 04 #Javascript

JS全角与半角转化实例(分享)

Jul 04 #Javascript

详解如何提高 webpack 构建 Vue 项目的速度

Jul 03 #Javascript

vue.js源代码core scedule.js学习笔记

Jul 03 #Javascript

推荐:极酷右键菜单

2006/11/29 Javascript

jquery属性过滤选择器使用示例

2013/06/18 Javascript

解析JavaScript中的不可见数据类型

2013/12/02 Javascript

邮箱下拉自动填充选择示例代码附图

2014/04/03 Javascript

JavaScript中的数值范围介绍

2014/12/29 Javascript

jQuery中offsetParent()方法用法实例

2015/01/19 Javascript

js实现顶部可折叠的菜单工具栏效果实例

2015/05/09 Javascript

jQuery+css实现的蓝色水平二级导航菜单效果代码

2015/09/11 Javascript

自动化测试读写64位操作系统的注册表

2016/08/15 Javascript

jQuery组件easyui对话框实现代码

2016/08/25 Javascript

ES6之模版字符串的具体使用

2018/05/17 Javascript

微信小程序使用map组件实现解析经纬度功能示例

2019/01/22 Javascript

vue中根据时间戳判断对应的时间(今天昨天前天)

2019/12/20 Javascript

Vue toFixed保留两位小数的3种方式

2020/10/23 Javascript

[40:03]RNG vs VG 2019国际邀请赛小组赛 BO2 第二场 8.15

2019/08/17 DOTA

在Python中利用Into包整洁地进行数据迁移的教程

2015/03/30 Python

Python随机生成信用卡卡号的实现方法

2015/05/14 Python

python函数装饰器用法实例详解

2015/06/04 Python

Python操作MySQL数据库的两种方式实例分析【pymysql和pandas】

2019/03/18 Python

Python发送邮件的实例代码讲解

2019/10/16 Python

CSS3 :default伪类选择器使用简介

2018/03/15 HTML / CSS

法人授权委托书样本

2014/09/19 职场文书

毕业证丢失证明范本

2014/09/20 职场文书

2014年群众路线党员自我评议

2014/09/24 职场文书

2014红色之旅心得体会

2014/10/07 职场文书

学校食堂管理制度

2015/08/04 职场文书

2019幼儿园感恩节活动策划书

2019/11/28 职场文书

Golang解析JSON对象

2022/04/30 Golang