CSS 悬停在具有特定背景颜色的 table 单元格上不起作用

Question

我已经使用 CSS 对 table 的行设置了 :hover 效果。唯一的问题是悬停效果不起作用，如果 table 单元格具有特定的背景颜色，例如绿色。在示例代码中，这意味着第 3 列不会在您将鼠标移到它上面时立即将背景颜色从绿色（resp. red）更改为 #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，但没有任何变化。

我的代码有什么问题？

Answer 1

如果你说只是 tr 悬停那么你可以只更改 tr 背景，但是 td 有背景并且在 tr 之上。所以你应该说 hovered tr's 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>

Answer 2

您忘记将 <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>

Answer 3

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

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

Answer 4

使用

更好地设计悬停 TR 的 TD

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

Answer 5

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

CSS 悬停在具有特定背景颜色的 table 单元格上不起作用

CSS hover not works on a table cell if it has a specific background color

html

css

html-table

hover