zoukankan      html  css  js  c++  java
  • 鼠标移到导航上面 当前的LI变色 处于当前的位置

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


  • 相关阅读:
    学习mongodb简单安装、连接数据库、增删改查
    第三方模块glup学习
    npm 借助第三方模块nrm切换淘宝源
    nodemon 学习
    bootstrap和ie浏览器兼容性问题怎么解决?
    所得税
    债务重组
    非货币性资产交换
    政府补助
    收入 费用 和利润
  • 原文地址:https://www.cnblogs.com/riskyer/p/3275653.html
Copyright © 2011-2022 走看看