Search code examples
csspseudo-class

Why is Hovering style not working in the below code?

I want the rows in a table other than the heading row to have an opacity of 0.6 and when I hover over it I want the opacity to change to 1. However, when I use the following code the hovering style doesn't work. If I apply 0.6 opacity to all the rows and columns of a table then the hovering style works. Why is this?

tr td {
  opacity: 0.6;
}

tr:hover {
  opacity: 1;
}
Solution

  • Check this, run the snippet:

    tr {
  min-width:50px;
}
tr td {
  opacity: 0.2;
  min-width:inherit;
}

tr:hover td{
  opacity: 1;
}
    <table column-width=40px>
  <tr bgcolor=green><td>A</td><td>F</td></tr>
  <tr bgcolor=red><td>B</td><td>G</td></tr>
  <tr bgcolor=violet><td>C</td><td>H</td></tr>
  <tr bgcolor=yellow><td>D</td><td>I</td></tr>
  <tr bgcolor=blue><td>E</td><td>J</td></tr>
</table>

    I used hover attribute with <tr> and passed the effect to all its <td> using:

    tr:hover td{
  opacity: 1;
}

    And all you forgot was this one tiny td !