3

大きなテーブル (18 行 x 11 列) を持つサイトを開発しています。誰がそのテーブルを見ているかを簡単にするために、TR の別の色をホバーさせました。

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

しかし、私は列で同じことをしたいです。しかし、 を使用する.responsive td:hover {background-color: blue;}と、列全体ではなく、単一の TD だけがホバリングされます。少なくとも、すべての TD には 、 などのクラスcol1がcol2あります。

TD をホバリングするときに CSS プロパティを変更するにはどうすればよいですか。これが可能であれば、TDにカーソルを合わせたときにbackground-colorfrom クラスを変更できます。col1col1

何か案が？

4

1 に答える 1

4

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

デモンストレーション

于 2013-01-07T18:26:29.120 に答える