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插件实现图片延迟加载技术详细说明
Mar 12 Javascript
js中的布尔运算符使用介绍
Nov 20 Javascript
jQuery插件jPaginate实现无刷新分页
May 04 Javascript
详细解读AngularJS中的表单验证编程
Jun 19 Javascript
Bootstrap中表单控件状态(验证状态)
Aug 04 Javascript
vue开发心得和技巧分享
Oct 27 Javascript
JavaScript学习笔记--常用的互动方法
Dec 07 Javascript
微信小程序 解决请求服务器手机预览请求不到数据的方法
Jan 04 Javascript
bootstrap table 数据表格行内修改的实现代码
Feb 13 Javascript
vue 属性拦截实现双向绑定的实例代码
Oct 24 Javascript
element el-tree组件的动态加载、新增、更新节点的实现
Feb 27 Javascript
es6函数中的作用域实例分析
Apr 18 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 array_walk_recursive 使用自定的函数处理数组中的每一个元素
2016/11/16 PHP
jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码
2010/03/21 Javascript
初窥JQuery(一)jquery选择符 必备知识点
2010/11/25 Javascript
关于jQuery中的end()使用方法
2011/07/10 Javascript
5个最佳的Javascript日期处理类库分享
2012/04/15 Javascript
javascript数组的使用
2013/03/28 Javascript
javascript-简单的计算器实现步骤分解(附图)
2013/05/30 Javascript
JavaScript中number转换成string介绍
2014/12/31 Javascript
JavaScript代码性能优化总结(推荐)
2016/05/16 Javascript
jquery ezUI 双击行记录弹窗查看明细的实现方法
2016/06/01 Javascript
Bootstrap开发实战之第一次接触Bootstrap
2016/06/02 Javascript
基于jQuery实现的Ajax 验证用户名唯一性实例代码
2017/06/28 jQuery
nodejs动态创建二维码的方法
2017/08/12 NodeJs
vue axios 二次封装的示例代码
2017/12/08 Javascript
Nginx 配置多站点vhost 的方法
2018/01/07 Javascript
基于vue-router 多级路由redirect 重定向的问题
2018/09/03 Javascript
python 域名分析工具实现代码
2009/07/15 Python
python实现socket客户端和服务端简单示例
2014/02/24 Python
对python中两种列表元素去重函数性能的比较方法
2018/06/29 Python
在python中利用最小二乘拟合二次抛物线函数的方法
2018/12/29 Python
Python3中函数参数传递方式实例详解
2019/05/05 Python
python实现雪花飘落效果实例讲解
2019/06/18 Python
python之mock模块基本使用方法详解
2019/06/27 Python
Python递归函数 二分查找算法实现解析
2019/08/12 Python
Python3爬虫关于识别检验滑动验证码的实例
2020/07/30 Python
html5移动端自适应布局的实现
2020/04/15 HTML / CSS
美国领先的家庭智能音响系统品牌:Sonos
2018/07/20 全球购物
感恩节活动方案
2014/01/27 职场文书
宣传策划类求职信范文
2014/01/31 职场文书
餐饮业员工工作决心书
2014/03/11 职场文书
企业消防安全责任书
2014/07/23 职场文书
授权委托书
2014/07/31 职场文书
财政局党的群众路线教育实践活动整改方案
2014/09/21 职场文书
通讯稿格式及范文
2015/07/22 职场文书
医院岗前培训心得体会
2016/01/08 职场文书
CSS精灵图的原理与使用方法介绍
2022/03/17 HTML / CSS