编程 Javascript

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 相关文章推荐

JSON 学习之完全手册图文

May 29 Javascript

jquery判断元素是否隐藏的多种方法

May 06 Javascript

js创建表单元素并使用submit进行提交

Aug 14 Javascript

jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法

Nov 25 Javascript

jquery 重写 ajax提交并判断权限后使用load方法报错解决方法

Jan 19 Javascript

JS实现的计数排序与基数排序算法示例

Dec 04 Javascript

在vue中通过axios异步使用echarts的方法

Jan 13 Javascript

jquery 通过ajax请求获取后台数据显示在表格上的方法

Aug 08 jQuery

vue keep-alive 动态删除组件缓存的例子

Nov 04 Javascript

如何实现js拖拽效果及原理解析

May 08 Javascript

antd-日历组件,前后禁止选择,只能选中间一部分的实例

Oct 29 Javascript

vue3.0+vue-router+element-plus初实践

Dec 02 Vue.js

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