Jquery的hover方法讓鼠標經(jīng)過li時背景變色

更新時間：2013年09月06日 11:19:27 作者：

鼠標經(jīng)過時讓li背景變色，在某些時候還是挺實用的，下面為大家介紹下使用Jquery的hover方法來實現(xiàn)下，感興趣的朋友可以參考下

 
<!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> 

您可能感興趣的文章:

相關(guān)文章

ASP.NET jQuery 實例18 通過使用jQuery validation插件校驗DropDownList
這節(jié)我們還可以通過直接設(shè)置DropDownList屬性來設(shè)置jQuery validation插件的校驗規(guī)則和提示信息
2012-02-02
jQuery表單元素選擇器代碼實例
這篇文章主要為大家詳細介紹了jQuery表單元素選擇器代碼實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-02-02
jQuery中removeData()方法用法實例
這篇文章主要介紹了jQuery中removeData()方法用法,實例形式分析了removeData()方法移除匹配元素指定數(shù)據(jù)的技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2014-12-12
jQuery插件echarts設(shè)置折線圖中折線線條顏色和折線點顏色的方法
這篇文章主要介紹了jQuery插件echarts設(shè)置折線圖中折線線條顏色和折線點顏色的方法,結(jié)合實例形式分析了jQuery圖表插件echarts設(shè)置折線圖的相關(guān)操作技巧,需要的朋友可以參考下
2017-03-03
jQuery鼠標滑過橫向時間軸樣式(代碼詳解)
這篇文章主要介紹了jQuery鼠標滑過橫向時間軸樣式，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-11-11
基于jquery的仿百度搜索框效果代碼
最近項目中用到類似百度的輸入框，于是自己用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解決$符號命名沖突
本文主要介紹jQuery中$符號命名沖突的解決方法，希望能幫到大家，有需要的朋友可以參考一下。
2016-06-06
jQuery實現(xiàn)ToolTip元素定位顯示功能示例
這篇文章主要介紹了jQuery實現(xiàn)ToolTip元素定位顯示功能,結(jié)合實例形式分析了jQuery針對頁面元素屬性的動態(tài)操作相關(guān)技巧,需要的朋友可以參考下
2016-11-11