<!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>无标题文档</title>

 <script src="jquery.js"></script>

 <script>

 $(document).ready(function() {

     $("a").hover(

10         function(event){

11             $(this).addClass('hover');

12         },

13         function(){

14             $(this).removeClass('hover');

15         }

16     );

 });

 </script>

 <style>

     ul{

     width:200px;

     }

     ul li ul{

     list-style:none;

     margin:5px;

     width:200px;

     }

     a{

     display:block;

     border-bottom:1px solid #fff;

     text-decoration:none;

     background:#00f;

     color:#fff;

     padding:0.5em;

     }

     li{

     display:inline;

         }

     .hover{

     background:#000;

         }

 </style>

 </head>

 <ul>

     <li><a href="#">Development</a></li>

     <li><a href="#">Books</a></li>

     <li><a href="#">Programming</a></li>

     <li><a href="#">DBA</a></li>

 </ul>

 <body>

 </body>

 </html>

显示效果如下：

aaarticlea/png;base64,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" alt="" />

这个案例用以复习前面学过的.hover()方法。悬停事件包含两个事件处理函数，一个鼠标指针移到指定元素上时被调用，另一个在鼠标指针离开指定元素时被调用。

jQuery将悬停效果加到菜单项的更多相关文章

  1. 权限模块_使用权限_实现主页面的效果_显示左侧菜单&只显示有权限的菜单项

    权限模块__使用权限__实现主页面的效果 HomeAction.java public class HomeAction extends ActionSupport { public String i ...

  2. jQuery鼠标悬停内容动画切换效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 基于jQuery Tooltips悬停提示效果

    基于jQuery Tooltips悬停提示效果.这是一款基于jquery.tooltipster插件实现的jQuery Tooltips Hover effect特效.效果图如下: 在线预览   源码 ...

  4. jQuery鼠标悬停文字渐隐渐现动画效果

    jQuery鼠标悬停文字渐隐渐现动画效果 当时是做项目的时候用到的所以图片有些大,九张,真正要做图片不需要这么大 css样式 <style> *{ margin: 0; padding: ...

  5. CSS鼠标悬停图片加边框效果，页面布局发生错位的解决办法

    CSS鼠标悬停图片加边框效果,页面布局发生错位的解决办法 .recomend-list{ width:1200px; a{ @extend %fl; margin-right: 30px; width ...

  6. jQuery鼠标悬停3d菜单展开动画

    效果体验:http://hovertree.com/texiao/jquery/93/ 竖直的主菜单贴着页面左侧,当光标移入菜单项时,以3D动画的方式弹出对应的二级菜单.采用jQuery和CSS3实现 ...

  7. 在Winform界面菜单中实现动态增加【最近使用的文件】菜单项

    在我们一些和文件处理打交道的系统中,我们往往需要记录下最近使用的文件,这样方便用户快速打开之前浏览或者编辑过的文件,这种在很多软件上很常见,本文主要介绍在Winform界面菜单中实现[最近使用的文件] ...

  8. Android简易实战教程--第二十三话《绚丽的菜单项》

    转载本博客请注明出处:点击打开链接  http://blog.csdn.net/qq_32059827/article/details/52327456 今天这篇稍微增强点代码量,可能要多花上5分钟喽 ...

  9. Qt Widgets——动作类与小部件菜单项

    本文主要涉及以下三个类: QAction ——QWidgetAction QActionGroup QAction可称为动作类,它一般可当作菜单中的项组成菜单,也可作为工具栏上的按钮,它主要由图标.文 ...

随机推荐

  1. Ninject之旅之十一：Ninject动态工厂(附程序下载)

    摘要 如果我们已经知道了一个类所有的依赖项,在我们只需要依赖项的一个实例的场景中,在类的构造函数中引入一系列的依赖项是容易的.但是有些情况,我们需要在一个类里创建依赖项的多个实例,这时候Ninject ...

  2. ue4 c++ 接口

    使用UE4接口比起普通的高级语言,要多做很多工作,是因为要兼容蓝图的使用,有一些小坑需要注意,开始吧. 1.新建接口类 打开UE4编辑器,与往常一样,新建C++类,然后选择Object继承,然后取名字 ...

  3. R12将银行和分行都使用TCA管理

    R12将银行和分行都使用TCA管理,后台保存在HZ_PARTIES . 银行帐号:如果是付款或者是收款(本公司的帐号,内部帐号),都保存在ce_bank_accounts,ce_bank_acct_u ...

  4. java ppt课后作业

    1 .仔细阅读示例: EnumTest.java,运行它,分析运行结果? 枚举类型是引用类型,枚举不属于原始数据类型,它的每个具体值都引用一个特定的对象.相同的值则引用同一个对象.可以使用“==”和e ...

  5. CentOS 6忘记密码解决办法，root和普通用户均可

    转自nui111的文章:http://blog.csdn.net/nui111/article/details/28007357 说明 操作系统:CentOS 6.0 遇到问题:忘记管理员账号root ...

  6. iOS强制屏幕旋转

    /** 强制旋转屏幕为纵向 (注:这种方式 键盘不能旋转过来; iOS8.x下 UIAlterView旋转不过来  ) @return */ + (void)rotateOrientationPort ...

  7. LR自定义函数以及调用

    2.2.自定义函数以及调用 2.2.1.虚拟用户编程,使用C# 语言DLL 在VS中建立DLL类库项目,编写函数时使用public声明:实现函数后编译生成DLL: 在LR中建立 .Net Vuser脚 ...

  8. HDOJ(2056)&HDOJ(1086)

    Rectangles    HDOJ(2056) http://acm.hdu.edu.cn/showproblem.php?pid=2056 题目描述:给2条线段,分别构成2个矩形,求2个矩形相交面 ...

  9. NodeJS 错误处理最佳实践

    NodeJS的错误处理让人痛苦,在很长的一段时间里,大量的错误被放任不管.但是要想建立一个健壮的Node.js程序就必须正确的处理这些错误,而且这并不难学.如果你实在没有耐心,那就直接绕过长篇大论跳到 ...

  10. matlab 按照某列以行为单位进行排序

    a=[2 1 3 21 44 3] 然后按照第一列进行排序 sortrows(a,1) ans = 1 4 2 1 3 2 4 3 如要逆序,可以逆序读矩阵即可