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

问题

I alredy set a :hover effect on the rows of the table using CSS. The only problem is the hover effect doesn't work, if a table cell has a specific background color, e.g. green. In the sample code this means the 3rd column doesn't change the background color from green (resp. red) to #96c7ef as soon as you move the mouse over it. (It's ok, that the first row also doesn't change the background color. This is intentionally skipped using <thead>.) On the other cells, that don't have any background color, the hover works.

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

The hover effect also has the same behaviour, if the style declaration of the two cell (tdX, tdY) is specified as inline style. I specified !important, but nothing changes.

What is wrong with my code ?

回答1:

If you say just tr hover then you can just change tr background, but td has background and over the tr. So you should say hovered tr's td. So just add

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

Better style the TDs of the hovered TR using

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

回答3:

If you mean that the background color of the rows on hover should also be applied to those cells which do already have a background color (i.e. override this), you can extend the selector for the hover rule to also apply to the cells:

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

Actually it's even sufficient to simply use the second line (i.e. the one including the cells) in the selector, since this will apply to all cells of that row:

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

Here in your full code:

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

回答4:

you have forgotten to put <tr> inside <tbody>

something like this

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

回答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>

来源：https://stackoverflow.com/questions/61647186/css-hover-not-works-on-a-table-cell-if-it-has-a-specific-background-color

标签

html

css

html-table

hover