当鼠标悬停在一个TD上时改变CSS颜色

Question

我正在开发一个拥有大型表格的网站（18行x11列）。为了方便查看表格的人，我使用以下代码使TR悬停时呈现不同的颜色：

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

但我希望用同样的方法来处理列。但是，如果我使用 .responsive td:hover {background-color: blue;}，它只会悬停在单个TD上，而不是整个列。至少，每个TD都有类名col1、col2等。

如何在悬停在TD上时更改CSS属性？如果这是可能的，当我悬停在col1 TD上时，我可以更改类col1的background-color。

有任何想法吗？

- euDennis

Answer 1

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
);

演示

- Denys Séguret

---

请注意，支持 colspan 可能会有些困难，因此此解决方案不尝试。 - John Dvorak

这是一个不错的方法，但我会为每个“列”定义一个类，并更改CSS类，而不是要求JQuery通过选择迭代，使用.css方法 - 例如[ $（'.classname'）.css（'font-size'，'12px'）;]。 - OnoSendai

@OnoSendai 我建议第三种方法：使用类.col1，.col2 ...来附加.colHover类。然后一旦计算出colspans，就很容易定位它们。 - John Dvorak

@JanDvorak 我制作了一个处理colspan的版本。但是看问题，可能并不需要。 - Denys Séguret

如果你们能再借出一分钟时间，这行代码的作用是什么？$('td:nth-child('+($(this).index()+1)+')').addClass('colHover'); - euDennis