<!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. 1045 access denied for user 'root'@'localhost' using password yes的解决方法

    今天把一个项目和项目的数据库都下载到了本地,安装好项目和在本地配置好数据库后,在浏览器登陆项目的后台却出现了以下错误:   后来上百度搜索了好几个答案,都是讲述修改数据库密码的步骤,但是就是没有说明为 ...

  2. <fmt:formatDate>标签的输出格式：

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

  3. 学校系统快速js代码

    var select_arr=document.getElementById("iframeautoheight").contentWindow.document.getEleme ...

  4. 【转载】 C++多继承中重写不同基类中相同原型的虚函数

    本篇随笔为转载,原文地址:C++多继承中重写不同基类中相同原型的虚函数. 在C++多继承体系当中,在派生类中可以重写不同基类中的虚函数.下面就是一个例子: class CBaseA { public: ...

  5. 深入理解jQuery中的Deferred

    引入 1  在开发的过程中,我们经常遇到某些耗时很长的javascript操作,并且伴随着大量的异步. 2  比如我们有一个ajax的操作,这个ajax从发出请求到接收响应需要5秒,在这5秒内我们可以 ...

  6. 第一二九天上课 PHP 自制简单开发模板

    构建基础架构 在项目文件夹(自定义)下创建 (1)核心目录:WQ (2)模板目录:MoBan (3)编译目录:BianYi (4)创建配置文件: config.ini.php <?php //获 ...

  7. Sql Server隔离级别(1)

    数据库是一个并发操作的环境,就像多线程一样,这样在高并发的情况下回出现一些问题. 假设我们有一张表Account,表结构和数据如下所示 AccountName Balance jo 100 fo 20 ...

  8. VC++ 在使用 CImage 的Draw 输入一个图像时,有时候会造成图像失真严重,解决的方法如下

    VC++  在使用 CImage 的Draw 输入一个图像时,有时候会造成图像失真严重,解决的方法如下 失真主要是由于变形造成的.只要设置一下变形的模式就可以了 ::SetStretchBltMode ...

  9. [转]eclipse最佳设置

    设置工作空间的项目编码, 防止出现乱码     Window - Preferences - General - Workspace     将"Text file encoding&quo ...

  10. python第二天-linux权限管理

    (1)linux登陆密码忘了,怎么办? 把系统重启,在进入系统之前不断的按键盘左上角的"Esc"键会进入这样一个画面,按键盘上的e进入编辑. 进入这个画面以后,通过键盘的上下方向键 ...