td:hover which highlights the th for that td

Question

i have a table. Now what i want is when i highlight over for example Jackson (td) the 'th' in line with that highlights as well.. so for this example it would be lastname?

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Points</th>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

css:

tbody tr:hover td.text-left {
background-color: #0062a2 !important;
}

Thanks

Answer 1

You can get the index of the hovered td, and then find the related th with the same index, something like this:

$('table tr td').hover(function() {
    $('table tr th').eq($(this).index()).add(this).toggleClass('hover');
});

Example fiddle

Answer 2

This could be done only in CSS using pseudo elements, e.g using pseudo element :before.

The idea is to set the pseudo element background-color and make it overflow using height:1000%; top:-1000%; (this handles max 10 rows, for handle more rows, the calculation is 100% * number rows to handle, e.g, 10000% for 100 rows, etc...). This pseudo element is absolutely positioned with z-index inferior to TDs of TABLE. On TD :hover, because of pseudo element overflowing, the specific TH gets background color visualy changed. The TABLE needs overflow: hidden;.

table {
    overflow: hidden;
}
td {
    background-color: #fff;
    outline: 2px solid #fff;
    border:1px solid #000;
}
table, td {
    position: relative;
}
td:before {
    content:'\00a0';
    background-color: red;
    left: -1000%;
    position: absolute;
    transition: background-color 200ms linear;
}
td:hover:before {
    background-color: #0062a2;
    left:0;
    z-index: -1;
    height:1000%;
    width:100%;
    top:-1000%;
}
td:hover {
    background-color: #0062a2;
    transition: background-color 200ms linear;
}

<table style="width:100%">
    <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Points</th>
    </tr>
    <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
    </tr>
    <tr>
        <td>Adam</td>
        <td>Johnson</td>
        <td>67</td>
    </tr>
    <tr>
        <td>John</td>
        <td>Doe</td>
        <td>68</td>
    </tr>
    <tr>
        <td>Adam</td>
        <td>Smith</td>
        <td>27</td>
    </tr>
    <tr>
        <td>Frank</td>
        <td>Mayer</td>
        <td>56</td>
    </tr>
    <tr>
        <td>Sam</td>
        <td>Wickel</td>
        <td>67</td>
    </tr>
</table>

You can even handle click on TH elements to highlight specific column, here is a more complex example still in CSS only:

#lbl_tbl_col_none {
    font-weight: bold;
    text-decoration: underline;
    color: blue;
    cursor: pointer;
}
.not-visible {
    visibility: hidden;
}
.hidden {
    display: none;
}
th label {
    display: block;
    cursor: pointer;
}

.tbl_col_rd:checked ~ #tbl_col_none, .tbl_col_rd:checked ~ #lbl_tbl_col_none {
    visibility: visible;
}

#tbl_col_1:checked ~ table th:first-child, #tbl_col_2:checked ~ table th:nth-child(2), #tbl_col_3:checked ~ table th:nth-child(3) {
    background: #4462a2;
    color: white;
    outline: 2px solid #fff;
}

#tbl_col_1:checked ~ table td:first-child,#tbl_col_2:checked ~ table td:nth-child(2),  #tbl_col_3:checked ~ table td:nth-child(3) {
    background: #7167DB;
    font-weight: bold;
    color: white;
    text-align: center;
}

table {
    overflow: hidden;
    padding-left: 1.5em;
}
tbody {
    counter-reset: rowNumber;
}
tr {
    counter-increment: rowNumber;
}
thead tr:after {
    content:"#";
    position: absolute;
    left:0;
}
tbody tr:after {
    content: counter(rowNumber);
    min-width: 1em;
    padding: 0.1em;
    position: absolute;
    left:0;
    border-bottom: 1px solid #000;
}

tbody tr:hover td {
    font-weight: bold;
    background-color: #ddd;
}
tbody tr:hover:after {
    background-color: #0062a2;
    color: #fff;
    border-radius: 20px 100px;
    text-align: center;
    font-weight: bold;
    transition: all 250ms;
    transition-property: border-radius, padding, text-indent, color, background-color;
    padding: 0.1em 1em;
    text-indent: -20px;
    vertical-align: text-top;
    z-index: -2;
}
td {
    background-color: #fff;
    outline: 2px solid #fff;
    border:1px solid #000;
}
table, td {
    position: relative;
}
tbody td:before {
    left: -1000%;
    position: absolute;
    content:'\00a0';
    background-color: red;
    transition: background-color 200ms linear;
}
td:hover:before {
    background-color: #0062a2;
    left:0;
    z-index: -1;
    height:100000%;
    width:100%;
    top:-100000%;
}
tbody tr td:hover {
    background-color: #0062a2;
    transition: background-color 200ms linear;
    font-weight: bold;
    color: white;
}

<input type="radio" id="tbl_col_1" class="tbl_col_rd hidden" name="tbl_col_rd">
<input type="radio" id="tbl_col_2" class="tbl_col_rd hidden" name="tbl_col_rd">
<input type="radio" id="tbl_col_3" class="tbl_col_rd hidden" name="tbl_col_rd">
<input type="radio" id="tbl_col_none" class="hidden" name="tbl_col_rd">
<label id="lbl_tbl_col_none" for="tbl_col_none" class="not-visible">Reset selection</label>
<table style="width:100%">
    <thead>
        <tr>
            <th><label for="tbl_col_1">Firstname</label></th>
            <th><label for="tbl_col_2">Lastname</label></th>
            <th><label for="tbl_col_3">Points</label></th>
        </tr>
    </thead>
    <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
    </tr>
    <tr>
        <td>Adam</td>
        <td>Johnson</td>
        <td>67</td>
    </tr>
    <tr>
        <td>John</td>
        <td>Doe</td>
        <td>68</td>
    </tr>
    <tr>
        <td>Adam</td>
        <td>Smith</td>
        <td>27</td>
    </tr>
    <tr>
        <td>Frank</td>
        <td>Mayer</td>
        <td>56</td>
    </tr>
    <tr>
        <td>Sam</td>
        <td>Wickel</td>
        <td>67</td>
    </tr>
    <tr>
        <td>Adam</td>
        <td>Smith</td>
        <td>27</td>
    </tr>
    <tr>
        <td>Frank</td>
        <td>Mayer</td>
        <td>56</td>
    </tr>
    <tr>
        <td>Sam</td>
        <td>Wickel</td>
        <td>67</td>
    </tr>
    <tr>
        <td>Adam</td>
        <td>Smith</td>
        <td>27</td>
    </tr>
    <tr>
        <td>Frank</td>
        <td>Mayer</td>
        <td>56</td>
    </tr>
    <tr>
        <td>Sam</td>
        <td>Wickel</td>
        <td>67</td>
    </tr>
    <tr>
        <td>Adam</td>
        <td>Smith</td>
        <td>27</td>
    </tr>
    <tr>
        <td>Frank</td>
        <td>Mayer</td>
        <td>56</td>
    </tr>
    <tr>
        <td>Sam</td>
        <td>Wickel</td>
        <td>67</td>
    </tr>
</table>