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>

全栈编程 / CSS教程(可向下滚动)：