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 相关文章推荐
一组JS创建和操作表格的函数集合
May 07 Javascript
jquery 框架使用教程 AJAX篇
Oct 11 Javascript
采用call方式实现js继承
May 20 Javascript
JavaScript判断DIV内容是否为空的方法
Jan 29 Javascript
JavaScript表单验证开发
Nov 23 Javascript
微信小程序 跳转传参数与传对象详解及实例代码
Mar 14 Javascript
基于EasyUI的基础之上实现树形功能菜单
Jun 28 Javascript
JavaScript实现数值自动增加动画
Dec 28 Javascript
详解vue项目打包后通过百度的BAE发布到网上的流程
Mar 05 Javascript
vue项目打包后怎样优雅的解决跨域
May 26 Javascript
Vue中通过Vue.extend动态创建实例的方法
Aug 13 Javascript
原生JavaScript实现的无缝滚动功能详解
Jan 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设计模式 php实现访问者模式(Visitor)
2015/12/07 PHP
Symfony2框架创建项目与模板设置实例详解
2016/03/17 PHP
php each 返回数组中当前的键值对并将数组指针向前移动一步实例
2016/11/22 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
基于jquery DOM写的类似微博发布的效果
2012/10/20 Javascript
jquery 日期控件datepicker属性详细解析
2013/11/08 Javascript
用JavaScript实现使用鼠标画线的示例代码
2014/08/19 Javascript
jQuery提示效果代码分享
2014/11/20 Javascript
nodejs教程之异步I/O
2014/11/21 NodeJs
js实现鼠标悬停图片上时滚动文字说明的方法
2015/02/17 Javascript
AngularJS基础学习笔记之指令
2015/05/10 Javascript
Jquery实现纵向横向菜单
2016/01/24 Javascript
JavaScript实现类似淘宝的购物车效果
2017/03/16 Javascript
angular.js指令中transclude选项及ng-transclude指令详解
2017/05/24 Javascript
nodejs+mongodb+vue前后台配置ueditor的示例代码
2018/01/02 NodeJs
vue写h5页面的方法总结
2019/02/12 Javascript
ES6 Class中实现私有属性的一些方法总结
2019/07/08 Javascript
webpack打包优化的几个方法总结
2020/02/10 Javascript
[48:21]Mski vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
Python实现全角半角字符互转的方法
2016/11/28 Python
Python3 适合初学者学习的银行账户登录系统实例
2017/08/08 Python
PyQt5实现下载进度条效果
2018/04/19 Python
Python多线程原理与用法实例剖析
2019/01/22 Python
python用match()函数爬数据方法详解
2019/07/23 Python
python multiprocessing多进程变量共享与加锁的实现
2019/10/02 Python
Python 面向对象部分知识点小结
2020/03/09 Python
Pycharm插件(Grep Console)自定义规则输出颜色日志的方法
2020/05/27 Python
Django中Aggregation聚合的基本使用方法
2020/07/09 Python
css3 border-radius属性详解
2017/07/05 HTML / CSS
会计专业自荐信范文
2013/12/02 职场文书
2014年新农村建设工作总结
2014/12/01 职场文书
2015年校本培训工作总结
2015/07/24 职场文书
2016天猫双十一广告语
2016/01/28 职场文书
Python进程间的通信之语法学习
2022/04/11 Python
详解Redis的三种常用的缓存读写策略步骤
2022/05/06 Redis
鸿蒙3.0体验感怎么样? 鸿蒙3.0系统评测向
2022/08/14 数码科技