Question

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

这是我的代码：

string sBarcode = myReader.Item["Barcodes"];
string sName = myReader.Item["Name"];
var sDate = myReader.Item["EDate"];
string sQuantity = myReader.Item["Quantity"];
string sPrice = myReader.Item["Price"];

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

Answer 1

会发生这种情况，因为您只将悬停效果设置为td元素，而不是整行。如果您从css中移除td并仅将悬停应用于tr元素，则可以使用。

注意：您必须删除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>

Answer 2

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

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

请检查 EXAMPLE

Answer 3

您只需将悬停设置为整个表格行表示您的tr，现在您只需要td

只需将悬停添加到行：

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

Answer 4

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

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没有改变，它似乎依赖于不透明度，但这是我的结果，有些人可能不同意。

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

4 个答案: