I was wondering if it was possible to use css to highlight a cell on hover (changing the bg property), AND highlight the 2 cells directly under the "hovered" one?
I can use JS, JQuery, CSS...
Hope someone can help!
-
Pretty sure this has been answered somewhere. I've seen it. JS required i think.– wazzMay 12, 2020 at 6:01
-
Can you provide the table html?– EytanMay 12, 2020 at 6:47
-
When posting questions to SO, please try to post your current code so we can see some context to the question and where is the process you are. People will be willing to help but need something to go on.– fraggleyMay 14, 2020 at 12:53
-
Sorry. I'll do it better next time. I'm still new at Stackoverflow.– CPlusPatchJun 21, 2020 at 10:50
Add a comment
|
1 Answer
I think this should do the trick with jQuery.
$("td").hover(function(){
var cellIndex = $(this).index();
var firstCell = $(this).closest('tr').next().children().eq(cellIndex);
var secondCell = firstCell.closest('tr').next().children().eq(cellIndex);
firstCell.toggleClass('hover');
secondCell.toggleClass('hover');
});
td {
padding: 15px;
background-color: lightgray;
cursor: pointer;
}
td:hover{
background-color: brown;
}
.hover {
background-color: orange;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>H</td>
<td>E</td>
<td>L</td>
<td>L</td>
<td>O</td>
<td>!</td>
</tr>
<tr>
<td>H</td>
<td>E</td>
<td>L</td>
<td>L</td>
<td>O</td>
<td>!</td>
</tr>
<tr>
<td>H</td>
<td>E</td>
<td>L</td>
<td>L</td>
<td>O</td>
<td>!</td>
</tr>
<tr>
<td>H</td>
<td>E</td>
<td>L</td>
<td>L</td>
<td>O</td>
<td>!</td>
</tr>
</tbody>
</table>