Highlight columns on mouseenter and also the correspondent table header cell

Hello, I've been having trouble with highlighting both the column and the correspondent header cell. Also I wanted the trigger for the highlight to be in the header instead of the row.

Essentially I wanted it to work like this and currently I have the exemple given on the website, it works but not exactly like I want it to:

$(document).ready(function() {
var table = $('#example').DataTable();

$('#example tbody')
    .on( 'mouseenter', 'td', function () {
        var colIdx = table.cell(this).index().column;

        $( table.cells().nodes() ).removeClass( 'highlight' );
        $( table.column( colIdx ).nodes() ).addClass( 'highlight' );
        $( table.table().header() )
                .addClass( 'highlights' );
    } );

} );

Is there any way of making this work?