鼠标移到导航当前位置的LI变色处于选中状态


Posted in Javascript onAugust 23, 2013

鼠标移到导航上面 当前的LI变色 处于当前的位置,广泛应用于当前导航。

<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;} 
#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="http://jt.875.cn/js/jquery.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="#" >首页</a></li><li><a href="#" >品牌商机</a></li> 
<li><a href="#" >精品商机</a></li><li><a href="#" >最新商机</a></li> 
<li><a href="#" >投资考察会</a></li><li><a href="#" >在线交流区</a></li> 
</ul> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
jquery中dom操作和事件的实例学习-表单验证
Nov 30 Javascript
JavaScript 图像动画的小demo
May 23 Javascript
Js参数值中含有单引号或双引号问题的解决方法
Nov 06 Javascript
jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标
Mar 06 Javascript
jQuery创建DOM元素实例解析
Jan 19 Javascript
Bootstrap Search Suggest使用例子
Dec 21 Javascript
移动端手指放大缩小插件与js源码
May 22 Javascript
JavaScript实现简单生成随机颜色的方法
Sep 21 Javascript
Node.js中环境变量process.env的一些事详解
Oct 26 Javascript
vue使用iframe嵌入网页的示例代码
Jun 09 Javascript
vue组件详解之使用slot分发内容
Apr 09 Javascript
基于vue中keep-alive缓存问题的解决方法
Sep 21 Javascript
高效率JavaScript编写技巧整理
Aug 23 #Javascript
处理及遍历XML文档DOM元素属性及方法整理
Aug 23 #Javascript
JavaScript语言核心数据类型和变量使用介绍
Aug 23 #Javascript
Javascript表格翻页效果实现思路及代码
Aug 23 #Javascript
jquery $.each() 使用小探
Aug 23 #Javascript
js 时间函数应用加、减、比较、格式转换的示例代码
Aug 23 #Javascript
checkbox使用示例
Aug 23 #Javascript
You might like
关于PHP定时发送服务的解决办法
2017/04/23 PHP
在laravel中使用Symfony的Crawler组件分析HTML
2017/06/19 PHP
php微信公众号开发之秒杀
2018/10/20 PHP
PHP中strtr与str_replace函数运行性能简单测试示例
2019/06/22 PHP
兼容所有浏览器的js复制插件Zero使用介绍
2014/03/19 Javascript
基于JavaScript实现文字超出部分隐藏
2016/02/29 Javascript
限制复选框最多选择项的实现代码
2016/05/30 Javascript
JS正则子匹配实例分析
2016/12/22 Javascript
JavaScript和jQuery制作光棒效果
2017/02/24 Javascript
微信小程序使用audio组件播放音乐功能示例【附源码下载】
2017/12/08 Javascript
p5.js入门教程之小球动画示例代码
2018/03/15 Javascript
详解vue-element Tree树形控件填坑路
2019/03/26 Javascript
JS立即执行的匿名函数用法分析
2019/11/04 Javascript
解决vue项目F5刷新mounted里的函数不执行问题
2019/11/05 Javascript
使用Vue生成动态表单
2019/11/26 Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
2020/08/13 Javascript
[14:57]DOTA2 HEROS教学视频教你分分钟做大人-幽鬼
2014/06/13 DOTA
[45:16]完美世界DOTA2联赛循环赛 IO vs FTD BO2第二场 11.05
2020/11/06 DOTA
python判断字符串是否纯数字的方法
2014/11/19 Python
python绘制圆柱体的方法
2018/07/02 Python
对numpy Array [: ,] 的取值方法详解
2018/07/02 Python
python实现京东秒杀功能
2018/07/30 Python
Python实现多线程/多进程的TCP服务器
2019/09/03 Python
python模块和包的应用BASE_PATH使用解析
2019/12/14 Python
Python视频编辑库MoviePy的使用
2020/04/01 Python
Python接口开发实现步骤详解
2020/04/26 Python
CSS3实现同时执行倾斜和旋转的动画效果
2016/10/27 HTML / CSS
无谷物狗粮:Pooch & Mutt
2018/05/23 全球购物
EJB3.1都有哪些改进
2012/11/17 面试题
保送生自荐信范文
2013/10/06 职场文书
《日月潭》教学反思
2014/02/28 职场文书
班主任工作经验交流材料
2014/05/13 职场文书
第二批党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
2015年司机年终工作总结
2015/05/14 职场文书
私人贷款担保书该怎么写呢?
2019/07/02 职场文书
高效笔记技巧分享:学会这些让你不再困扰
2019/09/04 职场文书