撰寫：2020年1月14日
注意：不能保證三五年后壕鹉，本博文對(duì)于新版的瀏覽器和jQuery仍然有效担扑，請(qǐng)斟酌參考！
一劫笙、系統(tǒng)環(huán)境
- Windows 10 64bit 1903
- Chrome 79 64bit
- jQuery 3.4.1
二芙扎、代碼
2.1 創(chuàng)建樣板html
使用VS Code創(chuàng)建一個(gè)包含表格的html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>鼠標(biāo)懸停變色</title>
<style>
table{
margin: 10px auto;
border-collapse: collapse;
}
tr td{
border: 1px solid black;
margin: 5px;
padding: 5px;
height: 30px;
}
</style>
</head>
<body>
<table id="DataGrid1">
<tbody>
<tr>
<td>1</td>
<td>前端開發(fā)中經(jīng)常使用到table表格</td>
<td>前端開發(fā)中經(jīng)常使用到table表格</td>
<td>前端開發(fā)中經(jīng)常使用到table表格</td>
</tr>
<tr>
<td>2</td>
<td>前端開發(fā)中經(jīng)常使用到table表格</td>
<td>前端開發(fā)中經(jīng)常使用到table表格</td>
<td>前端開發(fā)中經(jīng)常使用到table表格</td>
</tr>
<tr>
<td>3</td>
<td>前端開發(fā)中經(jīng)常使用到table表格</td>
<td>前端開發(fā)中經(jīng)常使用到table表格</td>
<td>前端開發(fā)中經(jīng)常使用到table表格</td>
</tr>
<tr>
<td>4</td>
<td>前端開發(fā)中經(jīng)常使用到table表格</td>
<td>前端開發(fā)中經(jīng)常使用到table表格</td>
<td>前端開發(fā)中經(jīng)常使用到table表格</td>
</tr>
<tr>
<td>5</td>
<td>前端開發(fā)中經(jīng)常使用到table表格</td>
<td>前端開發(fā)中經(jīng)常使用到table表格</td>
<td>前端開發(fā)中經(jīng)常使用到table表格</td>
</tr>
</tbody>
</table>
</body>
</html>
將上述代碼保存為懸停變色.html，雙擊該文件填大，即可在瀏覽器中看到如下顯示結(jié)果：
表格結(jié)果
2.2 引入jQuery
可以使用CDN引入jQuery戒洼，CDN的網(wǎng)址如下：https://www.bootcdn.cn/jquery/，打開該網(wǎng)址栋盹，復(fù)制最新的3.4.1到剪貼板施逾，將其加入到html的head標(biāo)簽內(nèi)。引入jQuery的代碼如下：
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
2.3 hover實(shí)現(xiàn)懸停變色
實(shí)現(xiàn)表格行懸停變色例获，可以采用jQuery中的hover事件汉额。hover的語法如下：
$( selector ).hover( handlerIn, handlerOut )
其中selector為選擇器，handerIn為鼠標(biāo)進(jìn)入時(shí)的回調(diào)函數(shù)榨汤，handerOut為鼠標(biāo)離開時(shí)的回調(diào)函數(shù)蠕搜。
在懸停變色.html的head標(biāo)簽中新建一個(gè)script標(biāo)簽，其中代碼如下：
$(document).ready(function(){
$("table#DataGrid1 tr").hover(function () {
$(this).css("background-color", "yellow");
}, function () {
$(this).css("background-color", "white");
});
});
上面這部分代碼實(shí)現(xiàn)了當(dāng)鼠標(biāo)進(jìn)入時(shí)收壕，表格行背景色變?yōu)辄S色妓灌，鼠標(biāo)離開時(shí)表格行背景色變?yōu)榘咨?/strong>。
效果如下：
鼠標(biāo)懸停表格行變色.gif
2.4 完整代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>鼠標(biāo)懸停變色</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<style>
table{
margin: 10px auto;
border-collapse: collapse;
}
tr td{
border: 1px solid black;
margin: 5px;
padding: 5px;
height: 30px;
}
/* tr:hover{
background-color: #dafdf3;
} */
</style>
<script>
$(document).ready(function(){
$("table#DataGrid1 tr").hover(function () {
$(this).css("background-color", "yellow");
}, function () {
$(this).css("background-color", "white");
});
});
</script>
</head>
<body>
<table id="DataGrid1">
<tbody>
<tr>
<td>1</td>
<td>前端開發(fā)中經(jīng)常使用到table表格</td>
<td>前端開發(fā)中經(jīng)常使用到table表格</td>
<td>前端開發(fā)中經(jīng)常使用到table表格</td>
</tr>
<tr>
<td>2</td>
<td>前端開發(fā)中經(jīng)常使用到table表格</td>
<td>前端開發(fā)中經(jīng)常使用到table表格</td>
<td>前端開發(fā)中經(jīng)常使用到table表格</td>
</tr>
<tr>
<td>3</td>
<td>前端開發(fā)中經(jīng)常使用到table表格</td>
<td>前端開發(fā)中經(jīng)常使用到table表格</td>
<td>前端開發(fā)中經(jīng)常使用到table表格</td>
</tr>
<tr>
<td>4</td>
<td>前端開發(fā)中經(jīng)常使用到table表格</td>
<td>前端開發(fā)中經(jīng)常使用到table表格</td>
<td>前端開發(fā)中經(jīng)常使用到table表格</td>
</tr>
<tr>
<td>5</td>
<td>前端開發(fā)中經(jīng)常使用到table表格</td>
<td>前端開發(fā)中經(jīng)常使用到table表格</td>
<td>前端開發(fā)中經(jīng)常使用到table表格</td>
</tr>
</tbody>
</table>
</body>
</html>
