悬停后颜色 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;
}

如果我将鼠标放在左侧，则在带有单元格的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>

它相当骇人听闻，但至少有效。也许也可以减少选择器的数量，但我现在不关心它。