當鼠標懸停在TD上時改變CSS的顏色

Question

我正在開發一個有大桌子的網站（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
);

示范