如何仅使用CSS在悬停时突出显示表格行？

Question

是否可以使用CSS（不使用JavaScript）突出显示悬停时的表格行（类似this）？

Answer 1

是的，可以行但不是列。

tr:hover {
  background-color: lightyellow;
}

Answer 2

是的，但是你必须担心浏览器的兼容性就是一个例子

<style type="text/css">
    .tbl {width: 640px;}
    .tbl tr {background-color: Blue; height: 24px}
    .tbl tr:hover {background-color: Red;}
</style>


<table class="tbl">
    <tr><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td></tr>
</table>

Answer 3

如果您不关心Internet Explorer，:hover CSS伪类适用于任何元素。

如果您 关心IE，您可以找到解决方法here。

Answer 4

<style type="text/css">
   tr.tr-hover-class:hover {
      background: grey !important;
   }
</style>

<table>
   <tr class='tr-hover-class'></tr>
</table>

Answer 5

在这种情况下，您可以使用样式表规则将其添加到表格行中，如下面的CSS代码示例所示：

    tr:hover {
      background-color: #ffff99;
    }

完整示例：

  	.hoverTable{
		width:100%; 
		border-collapse:collapse; 
	}
	.hoverTable td{ 
		padding:7px; border:#4e95f4 1px solid;
	}
	/* Define the default color for all the table rows */
	.hoverTable tr{
		background: #b8d1f3;
	}
	/* Define the hover highlight color for the table row */
    .hoverTable tr:hover {
          background-color: #ffff99;
    }

<table class="hoverTable">
	<tr>
		<td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
	</tr>
	<tr>
		<td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
	</tr>
	<tr>
		<td>Text 3A</td><td>Text 3B</td><td>Text 3C</td>
	</tr>
</table>

Answer 6

适用于大多数浏览器

table tr:hover td {
  background: #efefef;
  cursor: pointer;
}