Question

当td标签悬停时，我想更改th标签的颜色。我尝试了以下代码，但无法正常工作。

    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>

Answer 1

export LD_LIBRARY_PATH=/opt/vc/lib/ your-executable用于当前元素之后的元素。 CSS无法选择先前的元素或父元素。

使用JS，您可以做到（为简单起见，使用jQuery）

Answer 2

您没有标记javascript，因此假设您只想使用css解决方案，可以使用this trick，但是它将突出显示整个列。

（不幸的是，您暂时无法使用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>

当td标签悬停时，我想更改颜色

2 个答案: