jquery导航制件jquery鼠标经过变色效果示例


Posted in Javascript onDecember 05, 2013
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<title>鼠标移到导航上面 当前的LI变色 处于当前的位置</title>
<style type="text/css">
ul,li{list-style:none;}
#nav li{display:inline-block;margin:0 5px;background:#ccc;padding:0 10px; line-height:24px;font-size:12px;float:left;}
#nav li.h_nav_over{background:red;color:#fff;}
#nav li.h_nav_over a{color:#fff;}
a{text-decoration:none;}
</style>
<script type="text/javascript" src="/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("#nav>ul>li").mouseover(function(){
        $("#nav>ul>li").each(function(i){
            $(this).removeClass("h_nav_over");
        });
        $(this).addClass("h_nav_over");
    }).mouseout(function(){
        $(this).addClass("h_nav_over");
    });
});
</script>
</head>
<body>
<div id="nav">
     <ul>
        <li><a  href="https://3water.com" >首页</a></li><li><a  href="https://3water.com/a/" >品牌商机</a></li>
        <li><a  href="https://3water.com/" >精品商机</a></li><li><a  href="https://3water.com/" >最新商机</a></li>
        <li><a  href="https://3water.com/" >投资考察会</a></li><li><a  href="https://3water.com/" >在线交流区</a></li>
     </ul>
</div>
</body>
</html>
Javascript 相关文章推荐
JQuery设置获取下拉菜单某个选项的值(比较全)
Aug 05 Javascript
jQuery控制TR显示隐藏的三种常用方法
Aug 21 Javascript
9款2014最热门jQuery实用特效推荐
Dec 07 Javascript
JavaScript图片轮播代码分享
Jul 31 Javascript
谈谈Jquery ajax中success和complete有哪些不同点
Nov 20 Javascript
微信小程序 下拉菜单的实现
Apr 06 Javascript
JavaScript使用ZeroClipboard操作剪切板
May 10 Javascript
JavaScript创建对象的七种方式(推荐)
Jun 26 Javascript
Node.js 使用流实现读写同步边读边写功能
Sep 11 Javascript
zTree jQuery 树插件的使用(实例讲解)
Sep 25 jQuery
angular2 NgModel模块的具体使用方法
Apr 10 Javascript
从0搭建vue-cli4脚手架
Jun 17 Javascript
javascript拖拽上传类库DropzoneJS使用方法
Dec 05 #Javascript
jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
Dec 05 #Javascript
JS获取html对象的几种方式介绍
Dec 05 #Javascript
JS获取URL中的参数数据
Dec 05 #Javascript
jquery插件tooltipv顶部淡入淡出效果使用示例
Dec 05 #Javascript
浅谈JavaScript函数参数的可修改性问题
Dec 05 #Javascript
浅析JavaScript中的隐式类型转换
Dec 05 #Javascript
You might like
PHP反转字符串函数strrev()函数的用法
2012/02/04 PHP
PHP两种去掉数组重复值的方法比较
2014/06/19 PHP
PHP中对各种加密算法、Hash算法的速度测试对比代码
2014/07/08 PHP
php开启与关闭错误提示适用于没有修改php.ini的权限
2014/10/16 PHP
PHP+MySQL之Insert Into数据插入用法分析
2015/09/27 PHP
php简单解析mysqli查询结果的方法(2种方法)
2016/06/29 PHP
PHP中递归的实现实例详解
2017/11/14 PHP
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
2011/10/29 Javascript
javascript工具库代码
2012/03/29 Javascript
JS获取几种URL地址的方法小结
2014/02/26 Javascript
JavaScript取得键盘按下方向键是哪个的方法
2015/08/04 Javascript
跟我学习javascript的call(),apply(),bind()与回调
2015/11/16 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
2016/03/07 Javascript
javascript显示系统当前时间代码
2016/12/29 Javascript
使用JS编写的随机抽取号码的小程序
2017/08/11 Javascript
[02:40]2014DOTA2 国际邀请赛中国区预选赛 四大豪门抵达华西村
2014/05/23 DOTA
Python的Tornado框架的异步任务与AsyncHTTPClient
2016/06/27 Python
详解Python3 中hasattr()、getattr()、setattr()、delattr()函数及示例代码数
2018/04/18 Python
python实现简单多人聊天室
2018/12/11 Python
python实现爬山算法的思路详解
2019/04/09 Python
Django中ORM外键和表的关系详解
2019/05/20 Python
keras.layer.input()用法说明
2020/06/16 Python
pandas针对excel处理的实现
2021/01/15 Python
CSS3实现时间轴效果
2016/07/11 HTML / CSS
中国排名第一的外贸销售网站:LightInTheBox.com(兰亭集势)
2016/10/28 全球购物
运动会广播稿50字
2014/01/26 职场文书
酒店中秋节促销方案
2014/01/30 职场文书
少先队学雷锋活动月总结
2014/03/09 职场文书
常务副总经理岗位职责
2014/04/12 职场文书
爱国卫生月活动总结范文
2014/04/25 职场文书
小学数学教学经验交流材料
2014/05/22 职场文书
房地产端午节活动方案
2014/08/24 职场文书
个人党性分析材料
2014/12/19 职场文书
2015年信息技术教研组工作总结
2015/07/22 职场文书
MySQL完整性约束的定义与实例教程
2021/05/30 MySQL
Python list列表删除元素的4种方法
2021/11/01 Python