基于hover的用法实例(推荐)
时间:2019-03-30
本文章向大家介绍基于hover的用法实例(推荐),主要包括基于hover的用法实例(推荐)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
//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的用法实例(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
- 余军:分布式数据库在金融行业的创新实践
- 微信小游戏采用了我们都忽略的产品推广新切入点
- ASP.NET MVC下的四种验证编程方式[续篇]
- 如何把业务问题变成机器学习的问题?
- 这算是ASP.NET MVC的一个大BUG吗?
- 【Scikit-Learn 中文文档】分解成分中的信号(矩阵分解问题) - 无监督学习 - 用户指南 | ApacheCN
- 区块链技术在非能源领域的应用场景
- Python读书笔记8
- How to debug .NET Core RC2 app with Visual Studio Code on Windows?
- 难道.NET Core到R2连中文编码都不支持吗?
- .NET Core RC2发布在即,我们试着用记事本编写一个ASP.NET Core RC2 MVC程序
- matplotlib的基本用法(四)——设置legend图例
- TensorFlow深度学习笔记 文本与序列的深度模型
- 究竟哪里安全?加拿大VS中国治安大数据起底!意料之中还是之外?
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Greenplum集群扩容总结
- Leetcode刷题 237. 删除链表中的节点 两行代码实现
- Leetcode刷题 206. 反转链表 递归迭代两种方法实现
- MySQL索引和查询优化
- Elasticsearch:Index 生命周期管理入门
- springboot面试杀手锏-自动配置原理
- flink 1.11.2 学习笔记(1)-wordCount
- 我是如何开发维护8千多行代码组件的
- 我对JS延迟异步脚本的思考
- 大数据表查询优化 - 表分区
- 日志系统rsync和日志切割logrotate-Linux每日一练(9)
- Canvas 绘制点线相交
- Canvas监测雷达
- Canvas线条花环
- JQ俄罗斯方块儿