CSS 表格悬停变色样式设置
表格悬停变色
什么是表格悬停变色，就是鼠标经过表格的时候，表格行会进行变色处理，以增强交互性和设计感。就像下方的这个表格示例：
| 蔬菜 | 水果 | 主食 |
|---|---|---|
| 绿豆 | 枇杷 | 米饭 |
| 豌豆 | 苹果 | 面条 |
表格悬停变色样式的设置方法
可以通过CSS中的:hover伪类选择器匹配表格中的行，即tr元素，语法如下：
tr:hover{background-color:colorValue}
表格悬停变色实例代码，及在线编辑器
<table id='t2'>
<tr><th>CSS</th><th>HTML</th><th>JavaScript</th></tr>
<tr><td>Id选择器</td><td>table标签</td><td>数组</td></tr>
<tr><td>伪类选择器</td><td>a标签</td><td>字符串</td></tr>
</table>
<style>
#t2{width:100%;height:100px;}
#t2 th{border-bottom:1px solid rgb(150,150,150);text-align:center;}
#t2 td{border-bottom:1px solid rgb(150,150,150);text-align:center;}
#t2 tr:hover{background-color:skyblue;}
</style>