I'm striving to update this table in a way that conceals the lines above the hovered point within that column. For instance, if the bottom middle box is hovered, three lines above it will be visible. My goal is to prevent those lines from being displayed.
<table>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>
<script>
$('td').on('mouseover mouseout', function(){
$(this).prevAll().addBack()
.add($(this).parent().prevAll()
.children(':nth-child(' + ($(this).index() + 1) +
')')).toggleClass('hover');
});
</script>
table {
table-layout:fixed;
width:100%;
height:300px;
border-collapse:collapse;
}
td {
border:1px solid black;
}
.hover {
border-color:#ef7c32; border-width:2px;}