如何使用CSS在HTML表格中创建悬停效果？

邪恶的病

我尝试使用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>

马蒂亚斯·塞弗特（Matthias Seifert）

发生这种情况是因为您仅将悬停效果设置为td元素，而不是整个行。如果您td从CSS中删除，而仅将鼠标悬停在trElements上，它将起作用。

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。