在悬停时影响其他元素的孩子的风格

Question

我可以用Javascript做到这一点，但我如何才能用CSS实现这个目标：

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

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

我想要的是当锚链接被悬停时，表头“info”受到影响。这些都是我试图无济于事的：

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

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

我错过了什么？

Answer 1

您不能通过选择链接来执行此操作，但可以定位父tr

这是因为有no parent selector或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>