html - 当 td-tag 悬停时，我想更改 th-tag 的颜色

Question

当 td-tag 悬停时，我想更改 th-tag 的颜色。我尝试了下面的代码，但它不起作用。

    td,th{
      border:solid;
    }
    td:hover~th{
      color:red;
      background:red;
    }

    <table>
      <tr>
        <th><h1>th1</h1></th>
        <th><h1>th2</h1></th></tr>  
      <tr>
        <td><h5>td1.1</h5></td>
        <td><h5>td1.2</h5></td></tr>
      <tr>
        <td>td2.1</td>
        <td>td2.2</td>
      </tr>
    </table>

标签： htmlcsshover

Answer 1

你没有标记javascript，所以假设你想要一个纯 CSS 的解决方案，有这个技巧，但它会突出显示整个列。

（不幸的是，您暂时无法使用 CSS 选择前一个元素，因此您需要使用 javascript<th>仅选择前一个元素。）

table {
  overflow: hidden;
}

tr:hover {
  background-color: #ffa;
}

td, th {
  position: relative;
}
td:hover::after,
th:hover::after {
  content: "";
  position: absolute;
  background-color: #ffa;
  left: 0;
  top: -5000px;
  height: 10000px;
  width: 100%;
  z-index: -1;
}

<table>
  <tr>
    <th>th1</th>
    <th>th2</th>
    <th>th3</th>
    <th>th4</th>
  </tr>  
  <tr>
    <td>td1.1</td>
    <td>td1.2</td>        
    <td>td1.3</td>
    <td>td1.4</td>
  </tr>  
  <tr>
    <td>td2.1</td>
    <td>td2.2</td>
    <td>td2.2</td>
    <td>td2.2</td>
  </tr>
</table>