Affect other element's child's style on hover

Question

I could do this with Javascript but I how would I go about achieving this with CSS only:

<table>
    <tr>
        <td>
            Hover <a href="#info">me</a>
        </td>
    </tr>

    <tr>
        <th id="info">
            Info
        </th>
    </tr>
</table>

All I want is when the anchor link gets hovered on, the table header "info" gets affected. And these are what I've tried to no avail:

a:hover #info
{  
    text-decoration: underline;
}

a:hover table tr > th#info
{  
    text-decoration: underline;
}

What did I miss?

score 3 · Accepted Answer · edited May 23 '17 at 11:51

3

You can't do this by selecting the link but you can target the parent tr

This is because there is no parent selector or previous sibling selector

tr:hover + tr th#info {
  text-decoration: underline;
  background: red;
}
a {
  display: inline-block
}

<table>
  <tr>
    <td>
      Hover <a href="#info">me</a>
    </td>
  </tr>

  <tr>
    <th id="info">
      Info
    </th>
  </tr>
</table>

edited May 23 '17 at 11:51

Community

1
1

answered Jun 28 '15 at 16:57

Paulie_D

107,962
13
142
161

Any explanation on why it won't work for the TR's child? Because I may want to add more elements/anchors inside the TD, targeting this #info, but if that's not possible then too bad... – Yom T. Jun 28 '15 at 17:03
I suggest you check the links I supplied...basically you can't select upwards in the DOM or children of other parents. – Paulie_D Jun 28 '15 at 17:06
OK, Javascript to go then. That's really too bad, but thanks though! – Yom T. Jun 28 '15 at 17:11

Affect other element's child's style on hover

1 Answers1