html表如何通过更改悬停边框来突出显示列？

Question

我正在探索如何设置表格的样式,以便当鼠标悬停在列上时可以更改边框.

当鼠标位于列上时,我想通过更改边框颜色来突出显示该列:

为了突出显示,我在jQuery库中使用以下JavaScript代码:

$('td').hover(function() {
    var t = parseInt($(this).index()) + 1;
    $('td:nth-child(' + t + ')').addClass('highlighted');
},
function() {
    var t = parseInt($(this).index()) + 1;
    $('td:nth-child(' + t + ')').removeClass('highlighted');
});

使用以下CSS:

.highlighted {
    border-top: 2px solid black;
    border-right: 2px solid black;
    border-left: 2px solid black;
}

您可以在这个JSFiddle中查看它是如何工作的:http://jsfiddle.net/sCFjj/1/ 这仅在我将鼠标悬停在最左侧列时才有效.否则,它会突出显示右列(和顶部),但不会突出显示左侧垂直列.有没有办法让左垂直列出现？

理想情况下,我希望效果忽略最低行,但我不确定如何从jQuery选择中排除一行.

我的尝试是基于前一个问题.

Answer 1

链接:jsFiddle.还可以添加到上一个collumn border-right,您将得到您想要的.我认为collumn的右边界是在下边缘的左边界.

JavaScript的:

$('td').hover(function() {
    var t = parseInt($(this).index()) + 1;
    $('td:nth-child(' + t + ')').addClass('highlighted');

    if(t>1){
        var t1 = t -1;
        //alert("T:" + t + "<br/> T1:" + t1);
        $('td:nth-child(' + t1 + ')').addClass('highlightedPrev');
    }
},
function() {
    var t = parseInt($(this).index()) + 1;
    $('td:nth-child(' + t + ')').removeClass('highlighted ');
        if(t>1){
         var t1 = t -1;
         $('td:nth-child(' + t1 + ')').removeClass('highlightedPrev');
    }
});?

CSS:

.highlighted {
    border: 2px solid black;
}
.highlightedPrev {
    border-right: 2px solid black;
}

希望我解决了你的问题.