Javascript 当鼠标悬停在TD上时更改CSS的颜色

我正在开发一个带有大表（18行x 11列）的站点。为了便于查看该表，我将其悬停在不同颜色的TR上：

.responsive tr:hover {
    background-color: red;
}

但我想对这个专栏做同样的评论。但是，如果我使用

.responsive td:hover{background color:blue；}

，它只悬停单个td，而不是整个列。至少，每个TD都有类

col1

，

col2

，等等

当鼠标悬停在TD上时，如何更改CSS属性。如果这是可能的，当我将

col1

TD悬停时，我可以从class

col1

更改

背景色

有什么想法吗？
HTML或CSS中没有列的概念

您必须使用javascript来实现这一点

下面是一个使用jQuery的解决方案：

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



现在，主要是为了好玩，如果你想处理colspan，你可以这样做：

var clean = function(){
   $('td').removeClass('colHover');
}
$('td').hover(
    function() {
       clean();
       var col = 0;
      $(this).prevAll().each(function(){col += parseInt($(this).attr('colspan')||'1')});
      $('tr').each(function(){
        var c = 0, done = false;
        $('td',this).each(function(){
          if (c>col && !done) {
            $(this).prev().addClass('colHover');
            done = true;
          }
          c += parseInt($(this).attr('colspan')||'1');
        });
        if (!done) $(this).find('td:last-child').addClass('colHover');
      });
    }, clean
);

请注意，支持
colspan
可能有点困难，因此此解决方案不会尝试to@JanDvorak支持colspan的主要问题是确定目标。我建议：突出显示与悬停单元格重叠的任何列重叠的所有单元格。这是一个好方法，但是我会为每个“列”定义一个类，并更改css类，而不是使用.css方法（例如[$（'.classname'）.css（'font-size'，'12px'）；]）来要求JQuery迭代选择。@OnoSendai我建议第三种方法：使用class
.col1，.col2…
来附加
.colHover
类。那么，一旦计算，colspans就很容易成为目标