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 相关文章推荐
javascript 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
Apr 07 Javascript
js中通过父级进行查找定位元素
Jun 15 Javascript
基于JQuery制作可编辑的表格特效
Dec 23 Javascript
js创建对象的方式总结
Jan 10 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
Jan 21 Javascript
js微信支付实现代码
Dec 22 Javascript
javascript正则表达式模糊匹配IP地址功能示例
Jan 06 Javascript
将angular-ui的分页组件封装成指令的方法详解
May 10 Javascript
JS实现按钮颜色切换效果
Sep 05 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
Sep 10 Javascript
JavaScript原型式继承实现方法
Nov 06 Javascript
vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作
Nov 09 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实现UTF-8文件BOM自动检测与移除实例
2014/11/05 PHP
php+ajax 实现输入读取数据库显示匹配信息
2015/10/08 PHP
php微信公众号开发之答题连闯三关
2018/10/20 PHP
判断多个元素(RADIO,CHECKBOX等)是否被选择的原理说明
2009/02/18 Javascript
两个select之间option的互相添加操作(jquery实现)
2009/11/12 Javascript
JS 的应用开发初探(mootools)
2009/12/19 Javascript
Jquery 的扩展方法总结
2011/10/01 Javascript
JavaScript 验证码的实例代码(附效果图)
2013/03/22 Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
2014/10/14 Javascript
深入分析Javascript跨域问题
2015/04/17 Javascript
十大热门的JavaScript框架和库
2017/03/21 Javascript
TypeScript入门-接口
2017/03/30 Javascript
详解vue-resource promise兼容性问题
2017/06/20 Javascript
基于jQuery Ajax实现下拉框无刷新联动
2017/12/06 jQuery
tangram.js库实现js类的方式实例分析
2018/01/06 Javascript
Vuejs 单文件组件实例详解
2018/02/09 Javascript
小程序测试后台服务的方法(ngrok)
2019/03/08 Javascript
wxpython中Textctrl回车事件无效的解决方法
2016/07/21 Python
TensorFlow数据输入的方法示例
2018/06/19 Python
python远程连接MySQL数据库
2019/04/19 Python
keras获得某一层或者某层权重的输出实例
2020/01/24 Python
使用celery和Django处理异步任务的流程分析
2020/02/19 Python
Python中使用socks5设置全局代理的方法示例
2020/04/15 Python
Python中实现一行拆多行和多行并一行的示例代码
2020/09/06 Python
基于python爬取梨视频实现过程解析
2020/11/09 Python
Django多数据库联用实现方法解析
2020/11/12 Python
Python命令行参数argv和argparse该如何使用
2021/02/08 Python
美国顶级品牌男士大码服装店:DXL
2017/08/30 全球购物
学前教育教师求职自荐信
2013/09/22 职场文书
正风肃纪剖析材料
2014/02/18 职场文书
租赁协议书范本
2014/04/22 职场文书
承诺函范文
2015/01/21 职场文书
义诊活动总结
2015/02/04 职场文书
团员个人年度总结
2015/02/26 职场文书
环卫处个人工作总结
2015/03/04 职场文书
听证通知书
2015/04/24 职场文书