<!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,iVBORw0KGgoAAAANSUhEUgAAAIUAAABRCAIAAABzF/JSAAAJq0lEQVR4nO2baVATaR7G/yCXBAxyCCgqckiQKyIiwiC3KHIJg4oRXFDQEZBLlEMOwxGIAYkRQoCICEIIV1TAi0VldVx3vGZqa3Rqa7f241ZtuVs1H3Zqv+yzH8zWOrVbU06h0y32U78PbyepdPfzq85ble6XwIVNIaYPgMuPwvlgVxbq4/VrvHrFoef775n2IZWCiEPP6CjTPpqbmW+BPWi1TPvgro+3Yf764HxwPtgLu3wYL0VgECIj4LrmXU/A0ATJyeCZMl/lIvSxKQrPnqJejPHrqCh4pxNYwsPcPThZv7dGfMOQ9hnng0CEsCSoFCCCkSVuziNMgHV+kMlQfhz+W5AlAhHCkxG1GZsiIJWiIAtm5pi4imUmCEuEQo5zLbDhQRCM2hq0tOJ0IQwIRwpwphEtDdh/AJ1d2BsDIiRnQiqFKAEmS1FWiRoxzjXAcRUu38HzWYQFcD4IoQm4qNKPC9vQWIjBa8jLxuXraGvC+BiseFAN4cA+3LqPzAOY/R0OJUDVg02f4eYN+HoipwLyWuwpxZfTcHfHyAz2xmB2HnEhkKqhUyMgHFNjCIzGg/sQHcBvv0JqDJ6/wEYvKLT4IhHpZVCdhjWf80HYloguhX48fBW5R/DwCSqLUVmDSCGKatAiQUs1BJH49msUF+J0LaK2okeFtEIMykAEO1cM9yOzFDW5IELeWdTloLsbpoRDRSjNBRmjVw3RKXw1h6Ii1FRiRyQG+kGE7Bqc2IfwTFTtYUYG63yExOPRA+wToW8YnQ0wNcfgBPIzsCsODmZY448f/oXUYJjZYvo2UuMRtx22dpiahoc3Jm4iaz+k3SgQYVcuHt9D2l78+jYCBJjUYfkSFFajrgQGfOiuYmMIpqewMxbR2+DmiVszIELhWVRmYGsq5sbh4cz5IFhaI12EQ4cQF6l/xW41yk4i/zCszUCEmB2wNAER3HxQXo7MNPBMsTUYRFgtQNlJHNwDIuwrxfhFHC/ENn8QISQYxgZw9YDADWSM4BAQISAM5aeQFA2eObZuBRFcveG5FoYmOPwFNnlyPt4f2dVoPMZMoZyP/4OVLextmC+X8/HRw7wP7v/dtxkZYdqHUgknJw49U1NM+9BoEBHBoefePaZ9NDYy/yvBHoaHmfbBzedvw/x8zvngfLCXj9WHOQ/GS5ivb5H7WO2JvgEou1CYhSUGP3Xcsm5EezFf3yL3Eb4b2iuwssOTF/BxBBFCIhARon/Xyh4x2+HqBCL06RDpDisHrFoBI3NExcDLlfk2F5uPzTGYv4eqeoxegiGhWoYeOZRqNJTA3hnj06iqwrUZbBJAosT+XRgaQ5AXejQ4U46EaBgw3eZi9HEf+fm4chnp+6DTgQhkAc0wms5CfARESM1Bay1OX8A//opYIYjQPQRpNRyXM9/mYvMRkYL+HhDh0gTOnMLYJJz4sPeF9jKOlULdAkNDnJDg1FE0dOPuDbTWw8IMZjwU1GF+mvk2F5sPd3/odFAooWiCmRHiRRjXYHgQCcFYYopWFXp7oTwPvjmKa+DlgCoJcvbgRBWUKhQfYr7NxebjDSbG/x3zLH/0bJXN/9zVMDLCUh6WM/T4wSfh41OG88EuOB/sgnkfTU3Mt8AeNBqmfWi1f4mNfcrxhvn5vzPsQy6X8PnE8QadbqE30Bfqo6Wlhbj8J9oFL1hb+HwuZboEFmV0wRM65+N9hvPBrrDLh6kFPyomNjE+bvWKZR/81I0s0zMyHPnGH3xHPyfs8rF5++5nTx5U1dbP372x0dn6w566oXlCcrKdhdGH3cvPDLt8hCfvl0vLiahj8FZ+fnrOiTplu8xT4JqeW3ZBoWgVV1gakq2zX2ePur1NLqkpsXZcUVF/Vi4VB20JKqkQyxUXwvxdnXzCZTKp/EJHednxk3VNfV3n7CxMdu09KJGe7ezsLMjNlSm6JJVHjUyWijIzV9rwiirrxA2SgT6l2wqeha2bXNlzrvV8e/PpX+ASZbuPgOikR1/OlVeLb0wMugg2zL/8LiloQ0Ra/rURldPKlWLF5Yq8zCbllfzPw1z94188nXcXev/+D9/t2OzO49lEbd9VKVNPdomj95/4zY3edS6+L//453Dh+kaFNk8U1tA12Fr6q+CUw3968cB1ndvkndlQYdCQ7qr/eodHX38T6eNWUKeWlIkqZD3VuUnOHiHfvnzqvdrwU/exJXb33Oz1xPg4B/5S4q8dGx83JTp8skNyMoWIQvfm9KkUV0aG7YmILLXaYZ8g/9HhQSIKTczqahPnV8vGVGd2igoU1QeJlmo1wzyi7MKzhbmJFZLWnVs9bIXbhlRyIpINaOIDw1QDAwECp8FRDRFFJZaday7qH9IIVhARjYxP+K1j4KeMXT4iUjL6e2T6jZWCqZmbq4ic/WNu37qVnZWl0V7dEbKxoEE1IK/JKWl49viWxybh1LVJIjoq7hlV1h2pvXBzoGXXwZK+lmNEVjPT122MKK+is/RoUm1bZ2qUcFVQ7PUraiJSjl9L2BLePzYW6Ok0MXPdlCghXdxefzCjuH60tzXr6KlXLx96OP7yOljmY7mdg/eG9foNU3M/odDcgIjIXRiSn5cfFeRLRIZmy5LS9oiyS+dmtPbWln5+vgZEphbWGYdyUpPivdzX2jqu2eDmRGQkFPoZG5CTs8eaVXbr3D1WWFua8m38vDyJSODjZ7ts+QYfn2U8U1+hnyGRrYOLwNWByCguJS1VdGzuzsw6vsGn7uNdsiNl36mSovM9A2W5ae+9jvAdeytPlsg6LoqLMxmw8TH6WGZtHxgY6LXe+UPUwePbbA4M9Nvg9iG+/F3y8flY3GHeh0QiYboEFmVkwQvWFupDpTrv4mLN8YaZmasM+xga+iE09G8cb7h7958M++DWq70Nt16NXTD/fAnng/PBXjgf7IJdPpy9MToOVRe6OuDtAiLk12OgD+pu+LuBCGSESxqE+TBf3CfhIywZk6Owt0eCCPOzsLNB1yQiHJBei9F2EEEYjdffo6OO+eI+CR+hCehV6sf1auSkQHwJvS2YnkVyCIjQ3IGdEVAPYs1iWWDAdh/qLv246RKyd6O+D015OF4L+RlY8PHNKxzLxd3nKExjvrvF7yN8N8aGYGmFRBEe3oaNFVQ6RDnAJQqzkzhWjIl+JO/G4TLM6WDykwuiP1LY5cPFF5oRtCvQq4S3M4hwvAmqC7h0EQE+KDqNLev1n5S2wcWW+foWuQ8Ozge74HywC84Hu2DeR10d8y2wh8FBpn08fozmZg49r14x7YPL+w3ng13hfLArnA92hfPBrnA+2BXOB7vyb7VbPqS3PYMoAAAAAElFTkSuQmCC" 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. linux 配置 tomcat 自动发布脚本

    首先将打包好的 war 包(举例 management-20160809-1.0.war),传到 tomcat 的 webapps 目录下,然后在 tomcat 目录下新建 deploy.sh 脚本. ...

  2. C++读入XML文件

    最近要做一个VRP的算法,测试集都是放在Xml文件中,而我的算法使用C++来写,所以需要用C++来读取Xml文件. 在百度上搜"C++读取Xml文件",可以出来很多博客,大多数是关 ...

  3. 学习 Linux，101: Linux 命令行

    概述 本教程将简要介绍 bash shell 的一些主要特性,涵盖以下主题: 使用命令行与 shell 和命令交互 使用有效的命令和命令序列 定义.修改.引用和导出环境变量 访问命令历史和编辑工具 调 ...

  4. Matrix QR Decomposition using OpenCV

    Matrix QR decomposition is very useful in least square fitting model. But there is no function avail ...

  5. python使用代理ip发送http请求

    一.需求背景 网站刷票时,经常会遇到限制一个ip只能投票一次的限制,为此需要使用代理ip 二.脚本如下: 1.Proxy_http.py使用代理ip发送httpr的get和post请求 #coding ...

  6. FireBird.conf配置文件常用参数

    1.RootDirectory  "写上Firebird服务器的安装路径" 如果不对FbServer服务是企动会出错的.2.DatabaseAcces 指的是访问Firebird数 ...

  7. Office 365 系列五 -------- Imap邮箱迁移步骤

    当客户购买了我们的Office 365之后,第一个功能必然是会用我们的企业邮箱,如果企业之前是用 263.腾讯.网易等的邮件厂商的话,必然会涉及到邮件的迁移, 其实说到邮箱迁移,我们办法很多,如果人数 ...

  8. 经典的Hello World VFP前端调后端C# Webservice

    1.按我设想的三层架构中,VFP是完全可以做为前端UI的,我们可以划分如下三层结构: 图片:三层架构图.jpg[设为封面] [删除] 其实大家看图,都明白大致意思,但是要明白各层数据是怎么流动的,却要 ...

  9. 详解收发不畅原因及U-Mail邮件中继解决之道

    邮件在商务往来中扮演着信息交流的重要角色,假如传输受阻,必将造成沟通不畅:可能三五封邮件的投递你意识不到其重要性,但假如长期需和客户保持沟 通,则需要保证其一贯的稳定性,这就很考验相关软件平台的性能是 ...

  10. Java基础之OOP

    1. 类(类型)于对象 (1)面向过程的开发于面向对象开发的区别: 面向过程更重视流程化以及功能的开发,简单点来讲,就是按照固定的模式一步步按部就班的进行,最终达成一个功能的实现.这种模式叫做面向过程 ...