table列表鼠标移入、移出转换背景色

有两种实现方式
一、利用鼠标事件

<table>
	<thead>
		<tr>
			<th>序号</th>
			<th>姓名</th>
			<th>年龄</th>
			<th>爱好</th>
		</tr>
	</thead>
	<tbody id="tbodyLists">
		<tr>
			<td>1</td>
			<td>张三</td>
			<td>88</td>
			<td>拉小提琴</td>
		</tr>
		<tr>
			<td>2</td>
			<td>李四</td>
			<td>99</td>
			<td>学习</td>
		</tr>
	</tbody>
</table>

<script src="./assets/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$("#tbodyLists tr").mouseover(function(){
		$(this).css({
			"backgroundColor":"cyan"
		})
	})
	
	$("#tbodyLists tr").mouseleave(function(){
		$(this).css({
			"backgroundColor":"#fff"
		})
	})
	
</script>

二、利用css中hover

#tbodyLists tr:hover{
	background-color: cyan;
}