如何使用css在html表格中创建悬停效果？答案

【问题标题】：How to create hover effect in html table using css?如何使用css在html表格中创建悬停效果？
【发布时间】：2017-09-21 11:20:56
【问题描述】：

我尝试使用 css 创建悬停效果，如果用户悬停在表格的行中，它会将背景颜色更改为红色。但是我注意到，当我将行悬停时，它不是用红色填充整行，而是只填充单个单元格。

这是我的代码：

.GridviewScrollHeader TH,
.GridviewScrollHeader TD {
  padding: 5px;
  font-weight: bold;
  white-space: nowrap;
  border-right: 1px solid #AAAAAA;
  border-bottom: 1px solid #AAAAAA;
  background-color: #EFEFEF;
  vertical-align: bottom;
  text-align: left;
}

.GridviewScrollItem TD {
  padding: 5px;
  white-space: nowrap;
  border-right: 1px solid #AAAAAA;
  border-bottom: 1px solid #AAAAAA;
  background-color: #FFFFFF;
}

.GridviewScrollItem TD:hover {
  background-color: red;
}

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>
    Test
  </title>

  <link href="GridviewScroll.css" rel="stylesheet" />
  <style type="text/css">
    BODY,
    TD {
      font-family: Tahoma, Arial, Verdana;
      font-weight: normal;
      font-size: 12px;
      color: #333333;
    }
  </style>
</head>

<body>
  <table cellspacing="0" id="GridView1" style="width:100%;border-
    collapse:collapse;">
    <tr class="GridviewScrollHeader">
      <td colspan="2">Product</td>
      <td rowspan="2">ListPrice</td>
      <td rowspan="2">StandardCost</td>
      <td colspan="2">Package</td>
      <td rowspan="2">SafetyStockLevel</td>
      <td rowspan="2">ReorderPoint</td>
      <td rowspan="2">SellStartDate</td>
    </tr>
    <tr class="GridviewScrollHeader">
      <td>Name</td>
      <td>Number</td>
      <td>Weight</td>
      <td>Size</td>
    </tr>
    <tr class="GridviewScrollItem">
      <td>HL Mountain Frame - Black, 38</td>
      <td>FR-M94B-38</td>
      <td>1349.6000</td>
      <td>739.0410</td>
      <td>2.68</td>
      <td>38</td>
      <td>500</td>
      <td>375</td>
      <td>7/1/2005 12:00:00 AM</td>
    </tr>
    <tr class="GridviewScrollItem">
      <td>HL Mountain Frame - Silver, 38</td>
      <td>FR-M94S-38</td>
      <td>1364.5000</td>
      <td>747.2002</td>
      <td>2.68</td>
      <td>38</td>
      <td>500</td>
      <td>375</td>
      <td>7/1/2005 12:00:00 AM</td>
    </tr>
  </table>

</body>

</html>

【问题讨论】：

标签： html css

【解决方案1】：

发生这种情况是因为您仅将悬停效果设置为 td 元素，而不是整行。如果您从 CSS 中删除 td 并仅将悬停应用到 tr 元素，则它可以工作。

注意：您必须删除td 元素的特定背景颜色，因为它们会覆盖tr:hover 效果。请看下面的工作 sn-p。

.GridviewScrollHeader th, .GridviewScrollHeader td {
    padding: 5px;
    font-weight: bold;
    white-space: nowrap;
    border-right: 1px solid #AAAAAA;
    border-bottom: 1px solid #AAAAAA;
    background-color: #EFEFEF;
    vertical-align: bottom;
    text-align: left;
}

.GridviewScrollItem TD {
    padding: 5px;
    white-space: nowrap;
    border-right: 1px solid #AAAAAA;
    border-bottom: 1px solid #AAAAAA;
}

.GridviewScrollItem {
  background: #fff;
}

.GridviewScrollItem:hover {
    background-color: red;
}

<table cellspacing="0" id="GridView1" style="width:100%;border-
collapse:collapse;">
    <tr class="GridviewScrollHeader">
        <td colspan="2">Product</td>
        <td rowspan="2">ListPrice</td>
        <td rowspan="2">StandardCost</td>
        <td colspan="2">Package</td>
        <td rowspan="2">SafetyStockLevel</td>
        <td rowspan="2">ReorderPoint</td>
        <td rowspan="2">SellStartDate</td>
    </tr>
    <tr class="GridviewScrollHeader">
        <td>Name</td>
        <td>Number</td>
        <td>Weight</td>
        <td>Size</td>
    </tr>
    <tr class="GridviewScrollItem">
        <td>HL Mountain Frame - Black, 38</td>
        <td>FR-M94B-38</td>
        <td>1349.6000</td>
        <td>739.0410</td>
        <td>2.68</td>
        <td>38</td>
        <td>500</td>
        <td>375</td>
        <td>7/1/2005 12:00:00 AM</td>
    </tr>
    <tr class="GridviewScrollItem">
        <td>HL Mountain Frame - Silver, 38</td>
        <td>FR-M94S-38</td>
        <td>1364.5000</td>
        <td>747.2002</td>
        <td>2.68</td>
        <td>38</td>
        <td>500</td>
        <td>375</td>
        <td>7/1/2005 12:00:00 AM</td>
    </tr>
</table>

【讨论】：

【解决方案2】：

将悬停的 css 更改为以下代码。

.GridviewScrollItem:hover TD
{
    background-color: red;
}

请查看此EXAMPLE

【讨论】：

【解决方案3】：

我尝试的是不同的，可能有一些问题，但我不能说我没有尝试我确实看到其他人的结果更好:)

CSS：

.GridviewScrollHeader TH, .GridviewScrollHeader TD{
    padding: 5px;
    font-weight: bold;
    white-space: nowrap;
    border-right: 1px solid #AAAAAA;
    border-bottom: 1px solid #AAAAAA;
    background-color: #EFEFEF;
    vertical-align: bottom;
    text-align: left;
}

.GridviewScrollItem TD{
    padding: 5px;
    white-space: nowrap;
    border-right: 1px solid #AAAAAA;
    border-bottom: 1px solid #AAAAAA;
    background-color: #FFFFFF;
}

/* The :nth-child() Does not work on some versions of IE 
removing it will only let you highlight other fields there on until the end of the "td" 
just add overflow-x:hidden if you remove the nth child and make the table full screen width by setting body margin to 0*/

.GridviewScrollItem TD:nth-child(1):hover{
    background-color: red;
    width:98.4%; /* If you ever Change the margins make sure to change this accordingly */ /* full screen is 100% but take note of margins */
    position:absolute;
    opacity:0.5; /* Does not work in IE9 or less */ /* Check for other opacity attributes for older IE Browsers */
    font-weight:bold; /* To Darken text to still be visable */
}

HTML 没有改变，它似乎依赖于不透明度，但这是我的结果，你们中的一些人可能不同意。

【讨论】：

【解决方案4】：

您只需将鼠标悬停在整个表格行上意味着您的tr，现在您只需要您的td

只需将hover添加到您的行：

.GridviewScrollItem:hover {
    background-color: red;
}

.GridviewScrollHeader th, .GridviewScrollHeader td {
    padding: 5px;
    font-weight: bold;
    white-space: nowrap;
    border-right: 1px solid #AAAAAA;
    border-bottom: 1px solid #AAAAAA;
    background-color: #EFEFEF;
    vertical-align: bottom;
    text-align: left;
}

.GridviewScrollItem TD {
    padding: 5px;
    white-space: nowrap;
    border-right: 1px solid #AAAAAA;
    border-bottom: 1px solid #AAAAAA;
}

.GridviewScrollItem {
  background: #fff;
}

.GridviewScrollItem:hover {
    background-color: red;
}

<table cellspacing="0" id="GridView1" style="width:100%;border-
collapse:collapse;">
    <tr class="GridviewScrollHeader">
        <td colspan="2">Product</td>
        <td rowspan="2">ListPrice</td>
        <td rowspan="2">StandardCost</td>
        <td colspan="2">Package</td>
        <td rowspan="2">SafetyStockLevel</td>
        <td rowspan="2">ReorderPoint</td>
        <td rowspan="2">SellStartDate</td>
    </tr>
    <tr class="GridviewScrollHeader">
        <td>Name</td>
        <td>Number</td>
        <td>Weight</td>
        <td>Size</td>
    </tr>
    <tr class="GridviewScrollItem">
        <td>HL Mountain Frame - Black, 38</td>
        <td>FR-M94B-38</td>
        <td>1349.6000</td>
        <td>739.0410</td>
        <td>2.68</td>
        <td>38</td>
        <td>500</td>
        <td>375</td>
        <td>7/1/2005 12:00:00 AM</td>
    </tr>
    <tr class="GridviewScrollItem">
        <td>HL Mountain Frame - Silver, 38</td>
        <td>FR-M94S-38</td>
        <td>1364.5000</td>
        <td>747.2002</td>
        <td>2.68</td>
        <td>38</td>
        <td>500</td>
        <td>375</td>
        <td>7/1/2005 12:00:00 AM</td>
    </tr>
</table>

【讨论】：