Jquery的hover方法让鼠标经过li时背景变色
来源地址：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时背景变色的更多相关文章
- jQuery的hover方法搭配css的hover选择器，实现选中元素突出显示
问题简述: 今天做帮一个师姐做网页遇到一个这样的要求: 鼠标不移动进表格,表格透明度不变. 鼠标移动进表格,hover到的单元格透明度不变,没hover到的单元格透明度改变. 先贴我已经实现好的效果, ...
- JQUERY写大图轮播；附jquery的hover()方法、animate()方法、find()方法
思想:黑框设置超出部分隐藏. 红框往左移动,通过判断红框左边框距离黑框左边框的像素值,来实现红框的移动. 绿框在最上层,放每张图片的说明和序号. 一:html部分(大框.图片部分.箭头部分.图片介绍部 ...
- jQuery的hover()方法（笔记）
因为mouseover和mouseout经常一起写,所以出现了hover() hover(function(){},function(){});第一个参数为鼠标移入运行的函数,第二个为鼠标离开运行的函 ...
- 【jquery】hover方法
方法名称:hover(over, out) 概述:当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数.当鼠标移出这个元素时,会触发指定的第二个函数. 参数: 1) overFunction 鼠标 ...
- css3实现 鼠标经过li时动态画边框(jq库导航)
<!doctype html> <html> <head> <meta charset="utf-8" /> <meta na ...
- jQuery用unbind方法去掉hover事件及其他方法介绍
近日项目开发十分的繁忙,其中一个需求是实现响应式导航.(响应式的问题我们在css相关的博客中再交流) 大家都知道导航是需要下来菜单效果的,必然就会用到 jQuery的 hover() 方法.若是导航放 ...
- 使用jQuery的hover事件在IE中不停闪动的解决方法
在使用jQuery的hover事件时,经常会因为鼠标滑动过快导致菜单不停闪动的情况,相信很多朋友都遇到过自己做的纵向下拉菜单不停的收缩,非常的讨厌.今天在给一个网站设计菜单时也遇到了这个情况,结果在百 ...
- jQuery的live()方法对hover事件的处理示例
hover([over,]out) 一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法 当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数. 当鼠标移出这个元素时,会触发指定的第二个 ...
- Jquery hover方法使用及 mouseenter与mouseleave和 mouseover与mouseout的区别
定义和用法 hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数. jQuery 1.7 版本前该方法触发 mouseenter 和 mouseleave 事件. jQuery 1.8 ...
随机推荐
- gephi安装好了，为何打不开？
ref: http://www.zhihu.com/question/21268129?sort=created 这个软件我自己也没有弄过,不过我同学要不会装,所以我测试地帮她装,得益于这个哥们的发的 ...
- 05_Smart-image通过SoftReference提高性能
文章导读: 文件介绍了常见的图片下载开源插件smart-image, 由于移动设备硬件受限,因此Android的相关app都要考虑到性能的关系, 所以很多的第三方插件都使用到了缓存cache技术,本人 ...
- JavaScript--Date函数
1. Date函数 var now = new Date(); 获取当前日期对象 now对象->Date.prototype->Object.prototype 将一个字符串转换为Date ...
- birt 运行环境搭建（部署到tomcat）
最近一直在研究eclipse的birt,各种坑~~~~(>_<)~~~~. Requirements:tomcat version:7.0,birt-runtime-4.6.0-20160 ...
- uva 11529 Strange Tax Calculation （几何+计数）
题目链接: http://vjudge.net/problem/viewProblem.action?id=18277 这题暴力n^4妥妥的TLE!即使n^3也可能会T 正确的姿势应该是:枚举每个点作 ...
- 【USACO 1.1.1】你的飞碟在这儿
[问题描述] 一个众所周知的事实,在每一慧星后面是一个不明飞行物UFO. 这些不明飞行物时常来收集来自在地球上忠诚的支持者. 不幸地,他们的空间在每次旅行只能带上一群支持者. 他们要做的是用一种聪明的 ...
- 全志A10_linux3.0内核编译记录
第一次尝试编译时按照 Android A10(4.0.3)系统编译详解.pdf 编译打包出来的镜像可用,但是内核没有生成Module.symvers .后来进一步研究才知道 ./build.sh 脚本 ...
- JavaScript设计模式之工厂模式
一.工厂模式概念 工厂模式定义一个用于创建对象的接口,这个接口由子类决定实例化哪一个类.该模式使一个类的实例化延迟到了子类.而子类可以重写接口方法以便创建的时候指定自己的对象类型(抽象工厂). 这个模 ...
- [HTML5 Canvas学习]绘制矩形
1.使用strokeRect和fillRect方法绘制矩形 a.strokeRect是绘制一个不填充的矩形 b.fillRect是绘制一个填充的矩形 代码: <script> var ca ...
- 实验六：分析Linux内核创建一个新进程的过程
原创作品转载请注明出处 + <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 题目自拟,内容围绕对Linu ...