当td标记悬停时，我想更改th标记的颜色

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

~用于当前元素后面的元素。CSS无法选择以前的元素或父元素。

使用JS可以进行(为了简单起见，使用jQuery(

$('td')
.mouseenter(function () {
$(this).closest('table').find('th').addClass('hovered')
})
.mouseleave(function () {
$('table .hovered').removeClass('hovered')
})

Answer 2

您没有标记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>