javascript-鼠标悬停TD时更改CSS的颜色

我正在开发一个具有大表(18行x 11列)的站点.为了使查看该表的人更容易,我将其悬停在TR的另一种颜色上：

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

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

悬停TD时如何更改CSS属性.如果可能的话,当我将鼠标悬停在col1 TD上时,可以从col1类更改背景颜色.

任何想法？

解决方法:

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

标签：css3,html-table,css,javascript
来源： https://codeday.me/bug/20191031/1975651.html