Question

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

2013-01-07

3246

javascript css html-table

我正在开发一个包含大型表格（18 行 x 11 列）的网站。为了让查看该表格的人更容易，我将其悬停在 TR 上的不同颜色：

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

但我想对列做同样的处理。但如果我使用 .responsive td:hover {background-color: blue; ，它只会悬停单个 TD，而不是整个列。至少，每个 TD 都有类 col1 、 col2 等。

如何在悬停 TD 时更改 CSS 属性。如果可以的话，当我将鼠标悬停在 col1 TD 上时，我可以从类 col1 更改 background-color 。

有什么想法吗？

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

演示