0

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;
}
Improve this question
1
  • 1
    read your code loudly and you will find the issue your self
    – Temani Afif
    Commented Mar 18, 2018 at 8:34

1 Answer 1

Reset to default
1

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 !

Improve this answer