Luntegg Luntegg - 1 year ago 95
HTML Question

Color TD after hover

For example, I have table with 1 row and many cells in this row.

<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>


With JS I choose one cell and apply some class to it, which colors this cell. What do I need? I need color (select) cells before clicks. When I hover on last cell, for example, I need color cells between cell with
class="red"
and cell with
hover
. Something like

.red + :hover {
background: green;
}


If I mouseenter in left side, before cell with
class="red"
the cell also needs to color between hover (include hover) and cell with some class. Can it be done only using CSS? In real situation I have many rows and many cells.

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

Answer Source

CSS only solution is here! =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>

It is rather hackish but it works at least. It might be possible to reduce the number of selectors as well, but I'm not bothered about it for now.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download