来源地址：http://itfish.net/article/29790.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>StripingTable</title> 
<script src="jquery-1.1.3.pack.js" type="text/javascript"></script> 
<!--将jQuery引用进来--> 
<script type="text/javascript"> 
$(document).ready(function() { 
$("#orderedlist tbody tr").hover(function() { 
// $("#orderedlist li:last").hover(function() { 
$(this).addClass("blue"); 
}, function() { 
$(this).removeClass("blue"); 
}); 
}); 
</script> 
<style> 
.blue { 
background:#bcd4ec; 
} 
</style> 
</head> 
<body> 
<table id="orderedlist" width="50%" border="0" cellspacing="0" cellpadding="0"> 
<!--用class="stripe"来标识需要使用该效果的表格--> 
<thead> 
<tr> 
<th>姓名</th> 
<th>年龄</th> 
<th>QQ</th> 
<th>Email</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td>邓国梁</td> 
<td>23</td> 
<td>31540205</td> 
<td>gl.deng@gmail.com</td> 
</tr> 
<tr> 
<td>邓国梁</td> 
<td>23</td> 
<td>31540205</td> 
<td>gl.deng@gmail.com</td> 
</tr> 
<tr> 
<td>邓国梁</td> 
<td>23</td> 
<td>31540205</td> 
<td>gl.deng@gmail.com</td> 
</tr> 
<tr> 
<td>邓国梁</td> 
<td>23</td> 
<td>31540205</td> 
<td>gl.deng@gmail.com</td> 
</tr> 
<tr> 
<td>邓国梁</td> 
<td>23</td> 
<td>31540205</td> 
<td>gl.deng@gmail.com</td> 
</tr> 
<tr> 
<td>邓国梁</td> 
<td>23</td> 
<td>31540205</td> 
<td>gl.deng@gmail.com</td> 
</tr> 
</tbody> 
</table> 
</body> 
</html>

截图如下:

Jquery的hover方法让鼠标经过li时背景变色的更多相关文章

  1. jQuery的hover方法搭配css的hover选择器，实现选中元素突出显示

    问题简述: 今天做帮一个师姐做网页遇到一个这样的要求: 鼠标不移动进表格,表格透明度不变. 鼠标移动进表格,hover到的单元格透明度不变,没hover到的单元格透明度改变. 先贴我已经实现好的效果, ...

  2. JQUERY写大图轮播；附jquery的hover()方法、animate()方法、find()方法

    思想:黑框设置超出部分隐藏. 红框往左移动,通过判断红框左边框距离黑框左边框的像素值,来实现红框的移动. 绿框在最上层,放每张图片的说明和序号. 一:html部分(大框.图片部分.箭头部分.图片介绍部 ...

  3. jQuery的hover()方法（笔记）

    因为mouseover和mouseout经常一起写,所以出现了hover() hover(function(){},function(){});第一个参数为鼠标移入运行的函数,第二个为鼠标离开运行的函 ...

  4. 【jquery】hover方法

    方法名称:hover(over, out) 概述:当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数.当鼠标移出这个元素时,会触发指定的第二个函数. 参数: 1) overFunction 鼠标 ...

  5. css3实现 鼠标经过li时动态画边框(jq库导航)

    <!doctype html> <html> <head> <meta charset="utf-8" /> <meta na ...

  6. jQuery用unbind方法去掉hover事件及其他方法介绍

    近日项目开发十分的繁忙,其中一个需求是实现响应式导航.(响应式的问题我们在css相关的博客中再交流) 大家都知道导航是需要下来菜单效果的,必然就会用到 jQuery的 hover() 方法.若是导航放 ...

  7. 使用jQuery的hover事件在IE中不停闪动的解决方法

    在使用jQuery的hover事件时,经常会因为鼠标滑动过快导致菜单不停闪动的情况,相信很多朋友都遇到过自己做的纵向下拉菜单不停的收缩,非常的讨厌.今天在给一个网站设计菜单时也遇到了这个情况,结果在百 ...

  8. jQuery的live()方法对hover事件的处理示例

    hover([over,]out) 一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法 当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数. 当鼠标移出这个元素时,会触发指定的第二个 ...

  9. Jquery hover方法使用及 mouseenter与mouseleave和 mouseover与mouseout的区别

    定义和用法 hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数. jQuery 1.7 版本前该方法触发 mouseenter 和 mouseleave 事件. jQuery 1.8 ...

随机推荐

  1. Jquery分步学习一

    <script type="text/javascript" src="../js/jquery-1.11.0.js"></script> ...

  2. 移动端网站或APP点击后出现闪动或灰色背景

    隐藏文本框阴影 input, textarea{-webkit-appearance: @none;} 取消手机点击屏幕时,会出现的灰块 html,body{-webkit-text-size-adj ...

  3. MySQL拷贝表的几种方式

    假如我们有以下这样一个表: id      username    password ----------------------------------- 1       admin       * ...

  4. UITableView 的使用总结

    确定单元格的位置:首先要知道分区号,在知道行号. UITableView:API文档的总结:1.UITableView的父类是:UIScrollview,所以他是能滚动的,但是只能在竖直方向滚动.2. ...

  5. 10个加速Table Views开发的Tips(转)

    本文由CocoaChina译者yake_099(博客)翻译,作者:David McGraw原文:10 Actionable Performance Tips To Speed Up Your Tabl ...

  6. 实现textarea限制输入字数

    实现textarea限制输入字数(包含中文只能输入10个,全ASCII码能够输入20个) textarea称文本域,又称文本区,即有滚动条的多行文本输入控件,在网页的提交表单中经常用到.与单行文本框t ...

  7. 跟我学android- 创建运行环境（二）

    Android程序 需要在Android手机上运行,因此 Android开发时 必须准备相关运行,调试环境. Android真机(建议使用真机,速度快,效果好) Android虚拟设备(AVD) 使用 ...

  8. poj3620

    #include<iostream>#include<string>#include<stack>#include<vector>#include< ...

  9. Firefox中Vimperator插件配置

    具体配置什么,同学们可以网上看下善用佳软关于Vimperator的说明,在这里我列出两条我个人觉得最有用的命令 set nextpattern=\s*下一页|下一张|下一篇|下页|后页\s*,^\bn ...

  10. 动态加载下拉框列表并添加onclick事件

    1.  js动态加载元素并设置属性 摘自(http://www.liangshunet.com/ca/201408/336848696.htm) <div id="parent&quo ...