html - 悬停后颜色 TD

Question

例如，我的表格有 1 行，这一行有很多单元格。

<table>
  <tr>
    <td></td>
    <td class="red"></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

在 JS 中，我选择一个单元格并对其应用一些类，该类为该单元格着色。我需要什么？点击前我需要颜色(选择)单元格。例如，当我将鼠标悬停在最后一个单元格上时，我需要在具有 class="red" 的单元格和具有 hover 的单元格之间为单元格着色。有点像

.red + :hover {
    background: green;
}

如果我在左侧使用 mouseenter，在带有 class="red" 的单元格之前，单元格还需要在悬停(包括悬停)和具有某些类的单元格之间着色。可以只使用 CSS 来完成吗？在实际情况下，我有很多行和很多单元格。

JSFiddle - https://jsfiddle.net/ssq8dzje/

Answer 1

纯 CSS 解决方案就在这里! =D

table {
    border-collapse: collapse;
    width: 100%;
}
td {
    border: 1px solid #000;
    cursor: pointer;
    height: 30px;
}
.red {
    background: #f33 !important;
}
td:hover {
    background: #22f !important;
}

tr:hover td.red ~ td,
tr:hover td:hover ~ td {
    background: green;
}

td.red ~ td:hover ~ td,
td:hover ~ td.red ~ td,
tr:hover td.red:hover ~ td {
    background: transparent;
}

<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td class="red"></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

这有点老套，但至少可以用。也可以减少选择器的数量，但我暂时不介意。