Question

我正在开发一个包含大表（18行x 11列）的站点。为了让谁更容易看到那张桌子，我让它为TR留下了不同的颜色：

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

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

在悬停TD时如何更改CSS属性。如果可以，我可以在悬停background-color道明广告时更改col1班col1。

有什么想法吗？

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

Demonstration

现在，主要是为了好玩，如果你想处理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
);

Demonstration

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

1 个答案: