<!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. <fmt:formatDate>标签的输出格式：

    <fmt:formatDate>标签的输出格式:  d   月中的某一天.一位数的日期没有前导零.      dd   月中的某一天.一位数的日期有一个前导零.      ddd   周中 ...

  2. HTTP权威指南笔记-1.概述

    1.1 通讯 Web内容是存储在服务器上的,Web服务所使用的是HTTP协议,所以经常称为HTTP服务器.通讯过程为客户端(正常我们所使用的)发出请求,服务端根据客户端的HTTP请求响应相应数据,这就 ...

  3. Josn序列化与反序列化

    using System.Web.Script.Serialization; /// <summary>        /// 序列化器        /// </summary&g ...

  4. MVC过滤器详解

    MVC过滤器详解   APS.NET MVC中(以下简称"MVC")的每一个请求,都会分配给相应的控制器和对应的行为方法去处理,而在这些处理的前前后后如果想再加一些额外的逻辑处理. ...

  5. SQL事务

    一.事务概念    事务是一种机制.是一种操作序列,它包含了一组数据库操作命令,这组命令要么全部执行,要么全部不执行.因此事务是一个不可分割的工作逻辑单元.在数据库系统上执行并发操作时事务是作为最小的 ...

  6. linux 学习6 软件包管理 资料链接

    软件包管理 这一章看得比较随意 先大概记点东西. RPM安装很繁琐,因为依赖性,手动安装太麻烦. ______我觉得直接yum在线安装就好了,很直接方便. 但是要特别注意的地方 在用yum升级或者卸载 ...

  7. win8.1 64位安装DEV C++

    1.首先下载64位版本的DEV C++ http://sourceforge.net/projects/orwelldevcpp/files/Setup%20Releases/ 2.采取默认安装即可, ...

  8. redis geo 初探

    redis的geo搜索功能是3.2之后新增的,所以实验开始之前先查看redis的版本,确保版本正确. redis的geo多用于地理类应用,所以这次还是用了高德地图API来用作数据源. 首先截取几个点: ...

  9. C#检测键盘输入

    void Update(){     if (Input.GetKey(KeyCode.W))     {          go stread;     }     if (Input.GetKey ...

  10. socket选项总结（setsocketopt）

    功能描述:        获取或者设置与某个套接字关联的选 项.选项可能存在于多层协议中,它们总会出现在最上面的套接字层.当操作套接字选项时,选项位于的层和选项的名称必须给出.为了操作套接字层的选项, ...