Jquery的hover方法让鼠标经过li时背景变色
更新时间：2013年09月06日 11:19:27 作者：
鼠标经过时让li背景变色，在某些时候还是挺实用的，下面为大家介绍下使用Jquery的hover方法来实现下，感兴趣的朋友可以参考下
复制代码 代码如下:
<!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>
您可能感兴趣的文章:
相关文章
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
这节我们还可以通过直接设置DropDownList属性来设置jQuery validation插件的校验规则和提示信息2012-02-02
这篇文章主要为大家详细介绍了jQuery表单元素选择器代码实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
这篇文章主要介绍了jQuery中removeData()方法用法,实例形式分析了removeData()方法移除匹配元素指定数据的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2014-12-12
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
这篇文章主要介绍了jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法,结合实例形式分析了jQuery图表插件echarts设置折线图的相关操作技巧,需要的朋友可以参考下2017-03-03
这篇文章主要介绍了jQuery鼠标滑过横向时间轴样式，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-11-11
最近项目中用到类似百度的输入框，于是自己用jquery写了一个。希望和大家共同分享一下。存在许多bug，请各位不吝赐教。2011-04-04
jQuery中;function($,undefined) 前面的分号的用处
这篇文章主要介绍了jQuery中;function($,undefined) 前面的分号的用处,需要的朋友可以参考下2014-12-12
jQuery获取css z-index在各种浏览器中的返回值
jQuery 取 css z-index 值在各种浏览器中的返回值的代码，需要的朋友可以参考下。2010-09-09
本文主要介绍jQuery中$符号命名冲突的解决方法，希望能帮到大家，有需要的朋友可以参考一下。2016-06-06
这篇文章主要介绍了jQuery实现ToolTip元素定位显示功能,结合实例形式分析了jQuery针对页面元素属性的动态操作相关技巧,需要的朋友可以参考下2016-11-11
最新评论