While attempting to update the class on hover, I noticed that the class changes from 1 to hovering cells
However, I want the class to change from 1 to currently hovered cells
If moving the mouse from 1 to 10 and then to 2, the currently hovered cells will be 2, so only 1 and 2 should change.
But currently, in such a scenario, the classes of 1 to 10 are being altered.
Is there a way to achieve this?
Thanks
$("td").hover(function() {
const id = Number($(this).attr('id'));
for(var j = 1; j <= id; j++){
$("#"+j).addClass("aqua");
}
});.aqua{
background-color: aqua;
}
td {
padding: 10px;
transition-duration: 0.4s;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td id="1">1</td>
<td id="2">2</td>
<td id="3">3</td>
<td id="4">4</td>
</tr>
<tr>
<td id="5">5</td>
<td id="6">6</td>
<td id="7">7</td>
<td id="8">8</td>
</tr>
<tr>
<td id="9">9</td>
<td id="10">10</td>
<td id="11">11</td>
<td id="12">12</td>
</tr>
</table>