鼠标移到导航上面 当前的LI变色 处于当前的位置

鼠标移到导航上面当前的LI变色处于当前的位置,广泛应用于当前导航。点击这里查看效果以下是源代码:1234鼠标移到导航上面当前的LI变色处于当前的位置-柯乐义51314152

大家好,又见面了,我是全栈君,今天给大家准备了Idea注册码。

全栈程序员社区此处内容已经被作者隐藏,请输入验证码查看内容
验证码:
请关注本站微信公众号,回复“验证码”,获取验证码。在微信里搜索“全栈程序员社区”或者“www_javaforall_cn”或者微信扫描右侧二维码都可以关注本站微信公众号。

鼠标移到导航上面 当前的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>

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/120801.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 测试后台管理系统思路和方法

    测试后台管理系统思路和方法每个公司不管做什么业务,开发网站,app或者公众号亦或小程序,但凡涉及到用户信息或者订单信息都有对应的后台管理系统,所以每个测试人员基本上都有测试过后台管理系统的经验,但是后台管理系统测试不仅仅是基本的增删改查测试,还需要进行业务逻辑测试,还有兼容性测试,接口测试和压力测试。下面是我总结的测试思路和方法,可能有很多不足之处,希望多多评论补充第一步,分析需求文档和原型图,原型图最好看有交互效果的…

    2022年5月11日
    53
  • zTree实现访问到第一节点在相同水平当前所选节点数目

    zTree实现访问到第一节点在相同水平当前所选节点数目

    2022年1月8日
    49
  • ArrayList遍历的三种方式[通俗易懂]

    ArrayList遍历的三种方式[通俗易懂]1publicclassArrayListTraversal{2publicvoidarrayListTraversal(List<Integer>lists){3/

    2022年7月4日
    28
  • 华为pimsm组播配置_华为m6卡槽

    华为pimsm组播配置_华为m6卡槽当你想要放弃了,一定要想想那些睡得比你晚、起的比你早、跑得比你卖力、天赋比你还高的牛人,他们早已在晨光中,跑向那个你永远只能眺望的远方。—马云文章目录一、组播地址划分二、拓扑三、基本配置四、PIM-SM的RPT共享树构建五、PIM六、PIM-SM的SPT七、PIM-SM基本概述PIM-SM(ProtocolIndependentMulticast-SparseMode)称为协议无关组播-稀疏模式。属于稀疏模式的组播

    2022年9月23日
    0
  • linux+uname+更改信息,更改linux uname

    linux+uname+更改信息,更改linux uname更改 DATA 管道 后 下面的代码片段产生所需的输出 请注意 我使用的是 Windows 平台 因此我将替换 rn 请检查 valspark SparkSession builder appName Spark test master local getOrCreate importspark implicits valfile1 spark

    2025年6月1日
    0
  • Cpu流水线_cpu多级流水线

    Cpu流水线_cpu多级流水线原文地址:AJourneyThroughtheCPUPipeline转载翻译地址:CPU流水线的探秘之旅作为程序员,CPU在我们的工作中扮演了核心角色,因此了解处理器内部的工作方式对程序员来说不无裨益。CPU是如何工作的呢?一条指令执行需要多长时间?当我们讨论某个新款处理器拥有12级流水线还是18级流水线,甚至是更深的31级流水线时,这到些都意味着什么呢?应用程序通常会将CPU看

    2022年8月20日
    8

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号