jquery导航制件jquery鼠标经过变色效果示例

代码如下:

<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="http://www.jb51.net" >首页</a></li><li><a  href="http://www.jb51.net/a/" >品牌商机</a></li>
        <li><a  href="http://www.jb51.net/" >精品商机</a></li><li><a  href="http://www.jb51.net/" >最新商机</a></li>
        <li><a  href="http://www.jb51.net/" >投资考察会</a></li><li><a  href="http://www.jb51.net/" >在线交流区</a></li>
     </ul>
</div>
</body>
</html>

赞 (0)

相关推荐

  • jquery实现table鼠标经过变色代码

    复制代码 代码如下: $('#<%=AllEvent.ClientID%> tr:not(:has("th"))').hover(function () { $bg = $(this).css('background-color'); $(this).css('background-color', '#ffc4c6'); }, function () { $(this).css('background-color', $bg); });

  • 15款优秀的jQuery导航菜单插件分享

    15款优秀的jQuery导航菜单插件分享

    1. Apple Menu Style 2. Color Fading Menu 3. Animated Drop Down Menu 4. Random Link Color 5. Scrollable 6. Moo Tool Homepage like 7. Animated Menu 8. jqDock Menu 9. Sliding jQuery Menu 10. CSS Mac Book Menu 11. Kwicks 12. Fading Menu with Content Repl

  • 写得不错的jquery table鼠标经过变色代码

    复制代码 代码如下: $('#<%=AllEvent.ClientID%> tr:not(:has("th"))').hover(function () { $bg = $(this).css('background-color'); $(this).css('background-color', '#ffc4c6'); }, function () { $(this).css('background-color', $bg); });

  • 分享14个很酷的jQuery导航菜单插件

    分享14个很酷的jQuery导航菜单插件

    导航按钮是网站的非常重要的一部分,因其将网站的所有部分而集中一处,jQuery导航菜单插件在其中扮演重要的角色. 本文介绍了14个很酷的jQuery导航菜单插件,它们够漂亮.简单,并且完全兼容各种类型的web浏览器. 1.Facets Navigation Demo | Download 2.Rocking & Rolling Demo | Download 3.Garage Door Menu Demo | Download 4.Little Boxes Menu Demo | Downloa

  • jquery导航制件jquery鼠标经过变色效果示例

    复制代码 代码如下: <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

  • jQuery实现菜单感应鼠标滑动动画效果的方法

    本文实例讲述了jQuery实现菜单感应鼠标滑动动画效果的方法.分享给大家供大家参考.具体分析如下: 此代码测试环境为IE9 以及GG.FF浏览器,IE8及以下浏览器可能不支持,希望理解. 这款JS鼠标滑动效果使用jQuery实现简单动画的方法,而且也惊喜的发现,jquery有更好的书写方法,可以连写,在animate方法前加上stop方法就可实现鼠标移出后,不再执行滑动效果. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T

  • JS鼠标滚动分页效果示例

    JS鼠标滚动分页效果示例

    首先先看问题: 在开发的时候,看到这种现象 就会思考:为什么左边的数据出来比右边的慢呢?因为这里没有进行分页,左边的数据多,所以查询相对较慢. 解决办法就是进行分页,但是在项目中用到的插件,不能控制样式,改变分页的宽度,样式就会乱掉.最简单的办法就是不分页(^_^) 但是既然是自己份内的事,为啥不做好呢?那就写分页呗,滚动分页! 问了其他同事,其他同事也...你去百度去.... 是啊,网上一大堆 ,但都是乱七八糟的,也没有效果图...坑 经过一番思考,和百度 思路来了: 需要了解三个dom元素,

  • jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】

    jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】

    本文实例讲述了jQuery实现的响应鼠标移动方向插件用法.分享给大家供大家参考,具体如下: HTML代码如下: <!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=de

  • jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】

    jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】

    本文实例讲述了jQuery插件FusionCharts实现的MSBar2D图效果.分享给大家供大家参考,具体如下: 1.页面展示 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-T

  • jQuery实现简单的网页换肤效果示例

    jQuery实现简单的网页换肤效果示例

    本文实例讲述了jQuery实现简单的网页换肤效果.分享给大家供大家参考,具体如下: 这里有4个文件:skin.html.blue.css.green.html.red.html,都放在同一目录下. 1.skin.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&

  • jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】

    jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】

    本文实例讲述了jQuery插件HighCharts绘制2D半圆环图效果.分享给大家供大家参考,具体如下: 1.实例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HighCharts 2D半圆环图</title> <script type="text/javascript" src="js/jquer

  • jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】

    jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】

    本文实例讲述了jQuery插件FusionWidgets实现的AngularGauge图效果.分享给大家供大家参考,具体如下: 1.设置AngularGauge图的数据源 AngularGauge.xml: <?xml version="1.0" encoding="UTF-8"?> <chart lowerLimit="0" upperLimit="100" lowerLimitDisplay="

  • jQuery实现的背景颜色渐变动画效果示例

    本文实例讲述了jQuery实现的背景颜色渐变动画效果.分享给大家供大家参考,具体如下: 完整实例代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" c

  • jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】

    jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】

    本文实例讲述了jQuery插件HighCharts绘制2D金字塔图效果.分享给大家供大家参考,具体如下: 1.实例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HighCharts 2D金字塔分布图</title> <script type="text/javascript" src="js/jqu

随机推荐