HTML鼠标移到导航上面时当前的LI变色
来源:互联网 发布:多级分销系统源码 编辑:程序博客网 时间:2024/05/21 10:33
原文地址:http://www.cnblogs.com/roucheng/p/3452230.html
鼠标移到导航上面 当前的LI变色 处于当前的位置,广泛应用于当前导航。
点击这里查看效果
以下是源代码:
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf8"> 4 <title>鼠标移到导航上面 当前的LI变色 处于当前的位置</title> 5 <style type="text/css"> 6 ul,li{list-style:none;} 7 #nav li{display:inline-block;margin:0 5px;background:#ccc;padding:0 10px; line-height:24px;font-size:12px;float:left;} 8 #nav li.h_nav_over{background:red;color:#fff;} 9 #nav li.h_nav_over a{color:#fff;}10 a{text-decoration:none;}11 12 </style>13 <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>14 15 <script type="text/javascript">16 $(function(){17 $("#nav>ul>li").mouseover(function(){18 $("#nav>ul>li").each(function(i){19 $(this).removeClass("h_nav_over");20 });21 $(this).addClass("h_nav_over");22 }).mouseout(function(){23 $(this).addClass("h_nav_over");24 });25 });26 </script>27 28 </head>29 <body>30 <div id="nav">31 <ul>32 <li><a href="http://keleyi.com" >首页</a></li><li><a href="http://keleyi.com/a/bjac/2208fcb8.htm" >品牌商机</a></li>33 <li><a href="http://keleyi.com/a/bjac/ec2s9a4n.htm" >精品商机</a></li><li><a href="http://keleyi.com/a/bjac/m9p0je8s.htm" >最新商机</a></li>34 <li><a href="http://keleyi.com/a/bjac/iphgrtqm.htm" >投资考察会</a></li><li><a href="http://keleyi.com/a/bjac/kjsrt3b0.htm" >在线交流区</a></li>35 </ul>36 </div>37 </body>38 </html>
阅读全文
0 0
- HTML鼠标移到导航上面时当前的LI变色
- 鼠标移到导航上面 当前的LI变色 处于当前的位置
- HTML鼠标移到a上面让a变色
- jtable中某列实现html中a标签效果,鼠标移到上面去的时候显示手型效果
- 鼠标经过超链接上,元素(li)背景变色的代码
- 鼠标经过超链接上,元素(li)背景变色的代码
- 鼠标移到图片上面弹出一个层
- html鼠标移到一级标题显示二级标题的例子
- 当鼠标移到上面字消失,移出又出现的效果代码
- 鼠标移到上面有文字提示的两种方法实现
- GridView和DataList实现鼠标移到行行变色
- 当鼠标移到单元格(tr、td)背景变色 多种解决方案
- 当鼠标移到单元格(tr、td)背景变色 多种解决方案
- 鼠标移到隔行变色的表格上,有背景变化,并且点击的时候选中复选框和背景色
- 鼠标经过时变色的表格
- 导航条点击当前页面变色
- DataGrid和GridView鼠标移动上面背景变色
- Repeater隔行换色、鼠标停留在上面是变色
- python爬虫----小白学习心得
- JZOJ4740. 【雅礼联考GDOI2017模拟9.2】Zjr506的捕猫计划(2017.8B组)
- 面向对象的第一个特征:封装III
- 我与CSDN的第一次
- sources code does not match the bytecode
- HTML鼠标移到导航上面时当前的LI变色
- 折半查找法
- R实战:【绘图】ggplot2[多维度分析神器]
- Java 中的双重检查(Double-Check)
- matlab 绘制分类面
- 【计划】游戏试玩和分析栏目的计划
- 输入输出流的问题
- AngularJS如何与后台服务器进行交互
- 国家信息化体系六要素