快捷導(dǎo)航

Jquery的hover方法讓鼠標(biāo)經(jīng)過(guò)li時(shí)背景變色

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

鼠標(biāo)經(jīng)過(guò)時(shí)讓li背景變色，在某些時(shí)候還是挺實(shí)用的，下面為大家介紹下使用Jquery的hover方法來(lái)實(shí)現(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引用進(jìn)來(lái)--> 
<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"來(lái)標(biāo)識(shí)需要使用該效果的表格--> 
<thead> 
<tr> 
<th>姓名</th> 
<th>年齡</th> 
<th>QQ</th> 
<th>Email</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td>鄧國(guó)梁</td> 
<td>23</td> 
<td>31540205</td> 
<td>gl.deng@gmail.com</td> 
</tr> 
<tr> 
<td>鄧國(guó)梁</td> 
<td>23</td> 
<td>31540205</td> 
<td>gl.deng@gmail.com</td> 
</tr> 
<tr> 
<td>鄧國(guó)梁</td> 
<td>23</td> 
<td>31540205</td> 
<td>gl.deng@gmail.com</td> 
</tr> 
<tr> 
<td>鄧國(guó)梁</td> 
<td>23</td> 
<td>31540205</td> 
<td>gl.deng@gmail.com</td> 
</tr> 
<tr> 
<td>鄧國(guó)梁</td> 
<td>23</td> 
<td>31540205</td> 
<td>gl.deng@gmail.com</td> 
</tr> 
<tr> 
<td>鄧國(guó)梁</td> 
<td>23</td> 
<td>31540205</td> 
<td>gl.deng@gmail.com</td> 
</tr> 
</tbody> 
</table> 
</body> 
</html> 

您可能感興趣的文章:

相關(guān)文章

ASP.NET jQuery 實(shí)例18 通過(guò)使用jQuery validation插件校驗(yàn)DropDownList
這節(jié)我們還可以通過(guò)直接設(shè)置DropDownList屬性來(lái)設(shè)置jQuery validation插件的校驗(yàn)規(guī)則和提示信息
2012-02-02
jQuery表單元素選擇器代碼實(shí)例
這篇文章主要為大家詳細(xì)介紹了jQuery表單元素選擇器代碼實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-02-02
jQuery中removeData()方法用法實(shí)例
這篇文章主要介紹了jQuery中removeData()方法用法,實(shí)例形式分析了removeData()方法移除匹配元素指定數(shù)據(jù)的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2014-12-12
jQuery插件echarts設(shè)置折線圖中折線線條顏色和折線點(diǎn)顏色的方法
這篇文章主要介紹了jQuery插件echarts設(shè)置折線圖中折線線條顏色和折線點(diǎn)顏色的方法,結(jié)合實(shí)例形式分析了jQuery圖表插件echarts設(shè)置折線圖的相關(guān)操作技巧,需要的朋友可以參考下
2017-03-03
jQuery鼠標(biāo)滑過(guò)橫向時(shí)間軸樣式(代碼詳解)
這篇文章主要介紹了jQuery鼠標(biāo)滑過(guò)橫向時(shí)間軸樣式，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-11-11
基于jquery的仿百度搜索框效果代碼
最近項(xiàng)目中用到類似百度的輸入框，于是自己用jquery寫(xiě)了一個(gè)。希望和大家共同分享一下。存在許多bug，請(qǐng)各位不吝賜教。
2011-04-04
jQuery中;function($,undefined) 前面的分號(hào)的用處
這篇文章主要介紹了jQuery中;function($,undefined) 前面的分號(hào)的用處,需要的朋友可以參考下
2014-12-12
jQuery獲取css z-index在各種瀏覽器中的返回值
jQuery 取 css z-index 值在各種瀏覽器中的返回值的代碼，需要的朋友可以參考下。
2010-09-09
jQuery解決$符號(hào)命名沖突
本文主要介紹jQuery中$符號(hào)命名沖突的解決方法，希望能幫到大家，有需要的朋友可以參考一下。
2016-06-06
jQuery實(shí)現(xiàn)ToolTip元素定位顯示功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)ToolTip元素定位顯示功能,結(jié)合實(shí)例形式分析了jQuery針對(duì)頁(yè)面元素屬性的動(dòng)態(tài)操作相關(guān)技巧,需要的朋友可以參考下
2016-11-11