如果表格单元格具有特定的背景颜色，则 CSS 悬停不适用于表格单元格答案

【问题标题】：CSS hover not works on a table cell if it has a specific background color如果表格单元格具有特定的背景颜色，则 CSS 悬停不适用于表格单元格
【发布时间】：2020-08-22 02:57:36
【问题描述】：

我已经使用 CSS 对表格的行设置了:hover 效果。唯一的问题是悬停效果不起作用，如果表格单元格具有特定的背景颜色，例如绿色。在示例代码中，这意味着当您将鼠标移到第 3 列上时，它不会将背景颜色从绿色（分别为红色）更改为 #96c7ef。（没关系，第一行也不会改变背景颜色。使用<thead> 有意跳过。）在没有任何背景颜色的其他单元格上，悬停有效。

page.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="pragma" content="no-cache">
    <link rel="stylesheet" href="./basic.css" type="text/css">
</head>

<body>
<table class="multidata" style="table-layout: fixed; width: 100%" cellspacing="0" border="0">
    <thead>
        <tr>
            <th style="width: 10%">ID</th>
            <th style="width: 10%">Name</th>
            <th style="width: 10%">Status</th>
        </tr>
    </thead>

    <tr>
        <td class="td1" style="color:grey"><i>1</i></td>
        <td class="td1" style="color:grey"><i>First</i></td>
        <td class="tdX" align="center"><b>Disabled</b></td>
    </tr>

    <tr>
        <td class="td2" style="color:grey"><i>2</i></td>
        <td class="td2" style="color:grey"><i>Second</i></td>
        <td class="tdY" align="center"><b>Active</b></td>
    </tr>
</table>
</body>
</html>

basic.css

.multidata td,.multidata th {
    border: 2px solid #808080;
    padding: 5px 5px;
}

.multidata tbody>tr:hover {
    background-color:#96c7ef!important;
}

.tdX {
    background-color:red;
    font-weight:bold;
}

.tdY {
    background-color:green;
    font-weight:bold;
}

如果将两个单元格 (tdX, tdY) 的样式声明指定为内联样式，则悬停效果也具有相同的行为。我指定了 !important，但没有任何变化。

我的代码有什么问题？

【问题讨论】：

标签： html css html-table hover

【解决方案1】：

如果您的意思是悬停时行的背景颜色也应该应用于那些确实已经有背景颜色的单元格（即覆盖它），您可以扩展悬停选择器规则也适用于单元格：

.multidata tbody>tr:hover,
.multidata tbody>tr:hover td {
  background-color: #96c7ef!important;
}

实际上，只需在选择器中使用第二行（即包含单元格的行）就足够了，因为这将应用于该行的所有个单元格：

.multidata tbody>tr:hover td {
  background-color: #96c7ef!important;
}

这里是你的完整代码：

.multidata td,
.multidata th {
  border: 2px solid #808080;
  padding: 5px 5px;
}

.multidata tbody>tr:hover td {
  background-color: #96c7ef!important;
}

.tdX {
  background-color: red;
  font-weight: bold;
}

.tdY {
  background-color: green;
  font-weight: bold;
}

<table class="multidata" style="table-layout: fixed; width: 100%" cellspacing="0" border="0">
  <thead>
    <tr>
      <th style="width: 10%">ID</th>
      <th style="width: 10%">Name</th>
      <th style="width: 10%">Status</th>
    </tr>
  </thead>

  <tr>
    <td class="td1" style="color:grey"><i>1</i></td>
    <td class="td1" style="color:grey"><i>First</i></td>
    <td class="tdX" align="center"><b>Disabled</b></td>
  </tr>

  <tr>
    <td class="td2" style="color:grey"><i>2</i></td>
    <td class="td2" style="color:grey"><i>Second</i></td>
    <td class="tdY" align="center"><b>Active</b></td>
  </tr>
</table>

【讨论】：

【解决方案2】：

如果你说只是 tr hover 那么你可以改变 tr 背景，但是 td 有背景并且在 tr 上。所以你应该说hovered tr的td。所以只需添加

.multidata  tbody>tr:hover td {
    background-color:#96c7ef!important;
}

.multidata td,.multidata th {
    border: 2px solid #808080;
    padding: 5px 5px;
}

.multidata  tbody>tr:hover td {
    background-color:#96c7ef!important;
}
.tdX {
    background-color:red;
    font-weight:bold;
}

.tdY {
    background-color:green;
    font-weight:bold;
}

<table class="multidata" style="table-layout: fixed; width: 100%" cellspacing="0" border="0">
    <thead>
        <tr>
            <th style="width: 10%">ID</th>
            <th style="width: 10%">Name</th>
            <th style="width: 10%">Status</th>
        </tr>
    </thead>

    <tr>
        <td class="td1" style="color:grey"><i>1</i></td>
        <td class="td1" style="color:grey"><i>First</i></td>
        <td class="tdX" align="center"><b>Disabled</b></td>
    </tr>

    <tr>
        <td class="td2" style="color:grey"><i>2</i></td>
        <td class="td2" style="color:grey"><i>Second</i></td>
        <td class="tdY" align="center"><b>Active</b></td>
    </tr>
</table>

【讨论】：

不客气 :) 你缺少的只是你改变了 tr 背景，它是 td 的后端，而你的 td 有背景。所以你应该说悬停 tr 的 td 背景

【解决方案3】：

.multidata td,.multidata th {
    border: 2px solid #808080;
    padding: 5px 5px;
}

.multidata tr:hover td {
    background-color:#96c7ef;
}

.tdX {
    background-color:red;
    font-weight:bold;
}

.tdY {
    background-color:green;
    font-weight:bold;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="pragma" content="no-cache">
    <link rel="stylesheet" href="./basic.css" type="text/css">
</head>

<body>
<table class="multidata" style="table-layout: fixed; width: 100%" cellspacing="0" border="0">
    <thead>
        <tr class="change_on_hover">
            <th style="width: 10%">ID</th>
            <th style="width: 10%">Name</th>
            <th style="width: 10%">Status</th>
        </tr>
    </thead>

    <tr class="change_on_hover">
        <td class="td1" style="color:grey"><i>1</i></td>
        <td class="td1" style="color:grey"><i>First</i></td>
        <td class="tdX" align="center"><b>Disabled</b></td>
    </tr>

    <tr class="change_on_hover">
        <td class="td2" style="color:grey"><i>2</i></td>
        <td class="td2" style="color:grey"><i>Second</i></td>
        <td class="tdY" align="center"><b>Active</b></td>
    </tr>
</table>
</body>
</html>

【讨论】：

【解决方案4】：

更好地设置悬停 TR 的 TD 样式

.multidata tbody>tr:hover td{ 背景颜色：#96c7ef }

【讨论】：

【解决方案5】：

您忘记将<tr> 放入<tbody> 中

类似的东西

<table class="multidata" style="table-layout: fixed; width: 100%" cellspacing="0" border="0">
    <thead>
        <tr>
            <th style="width: 10%">ID</th>
            <th style="width: 10%">Name</th>
            <th style="width: 10%">Status</th>
        </tr>
    </thead>

    <tbody>
    <tr>
        <td class="td1" style="color:grey"><i>1</i></td>
        <td class="td1" style="color:grey"><i>First</i></td>
        <td class="tdX" align="center"><b>Disabled</b></td>
    </tr>

    <tr>
        <td class="td2" style="color:grey"><i>2</i></td>
        <td class="td2" style="color:grey"><i>Second</i></td>
        <td class="tdY" align="center"><b>Active</b></td>
    </tr>
    </tbody>
</table>

【讨论】：