CODEWITHSUNDEEP
htmlcsshtml-tablehover
awgold90
awgold90

Reputation: 72

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 ?

Upvotes: 0

Views: 2601

Answers (5)

Johannes
Johannes

Reputation: 67748

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>

Upvotes: 1

Cagri Tacyildiz
Cagri Tacyildiz

Reputation: 17590

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>

Upvotes: 1

Jaipi
Jaipi

Reputation: 50

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

Upvotes: 0

davidgiesemann
davidgiesemann

Reputation: 1010

Better style the TDs of the hovered TR using

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

Upvotes: 1

Muhammad Ali Shahzad
Muhammad Ali Shahzad

Reputation: 84

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>

Upvotes: 0

Related Questions