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

How to highlight table row on hover using CSS only?

提问by demas

Is it possible to highlight table row on hover (something like this) using CSS only (without JavaScript)?

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

回答by Emil Vikstr?m

Yes, a row is possible but not a column.

是的，一行是可能的，但不是一列。

tr:hover {
  background-color: lightyellow;
}

回答by Ahmed Magdy

Yes it's possible but you have to worry about browser compatibility here is an example

是的，这是可能的，但您必须担心浏览器兼容性，这是一个示例

<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>

回答by ak-j

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

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

回答by Xaib Aslam

In this case you would add it to a table row using a stylesheet rule as in this CSS code example below:

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

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

Full Example:

完整示例：

   .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>

回答by Frédéric Hamidi

If you don't care about Internet Explorer, the :hoverCSS pseudo-class works with any element.

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

If you docare about IE, you can find a workaround here.

如果您确实关心 IE，可以在此处找到解决方法。

回答by wutzebaer

works with most browsers

适用于大多数浏览器

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