在悬停时突出显示指针左侧和向上列

Question

在hover事件的表格中，我希望row中鼠标的所有左突出显示，并且向上从鼠标突出显示column。

如何在CSS或JS中做到这一点？

Answer 1

这是我解决您问题的方法。首先在mouseenter（fyi hover不是一个事件，它是mouseenter）每个td我们将获得鼠标指针的目标td并向后迭代在tr上，并使用prevAll获取悬停td左侧的所有td。

$('table td').on('mouseenter mouseleave', function(e){
    var $tr, index;
    if(e.type === 'mouseenter'){
        $tr = $(e.target).parents('tr:first');
        index = $('td', $tr).index($(e.target));
        $(e.target).prevAll().addClass('highlight');
        $tr.prevAll().each(function(){
            $('td:eq('+index+')', this).addClass('highlight');
        });
    }else{
        $('.highlight').removeClass('highlight');
    }
});

DEMO