刪除Twitter Bootstrap表格中單個單元格的表格懸停效果

我正在使用Twitter Bootstrap在Web應用程序上工作。在我們的一個觀點中，有一個表格使用.table-hover類。儘管如此，表格中還有一些特定的單元格，我不想在突出顯示其餘行時突出顯示。我應該用什麼樣的規則來達到這種效果？刪除Twitter Bootstrap表格中單個單元格的表格懸停效果

這是我的看法表大致如何組織：

<table class="table table-hover"> 
    <thead> 
     <tr> 
      <th /> 
      <th>Header 1</th> 
      <th>Header 2</th> 
      <th>Header 3</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td rowspan="2">Row Group "Heading" 1</td> 
      <td>Content</td> 
      <td>Content</td> 
      <td>Content</td> 
     </tr> 
     <tr> 
      <td>Content</td> 
      <td>Content</td> 
      <td>Content</td> 
     </tr> 
     <tr> 
      <td rowspan="2">Row Group "Heading" 2</td> 
      <td>Content</td> 
      <td>Content</td> 
      <td>Content</td> 
     </tr> 
     <tr> 
      <td>Content</td> 
      <td>Content</td> 
      <td>Content</td> 
     </tr> 
    </tbody> 
</table>

我要讓跨越2行，當他們上空盤旋，沒有突出的細胞。

編輯：

我想這個CSS：

td.rowTitle:hover { background-color: transparent; }

它不工作，很遺憾。我認爲這可能是因爲整行被突出顯示，而不僅僅是單元格...

來源

2012-11-29 Kevin

這是自舉CSS的樣子：

.table-hover { 
      tbody { tr:hover td, tr:hover th 
          { background-color: @tableBackgroundHover; } 
         } 
      }

有了一點的jQuery：

$('td[rowspan]').addClass('hasRowSpan');

然後，您可以使用下面的CSS來覆蓋它：

tbody tr:hover td.hasRowSpan { 
      background-color: none; /* or whatever color you want */ 
}

來源

2012-11-29 00:22:47 mccannf

它相當於'tbody tr：hover td [rowspan]'，jQuery不是必須的 – iamawebgeek

我不確定使用什麼方法來創建這些「懸停」，但是如果您要添加特定的懸停規則分開那些細胞。所以給這些單元格一個類名稱，然後可以爲它們設置特定的樣式/懸停。

來源

2012-11-29 00:14:14 Omega

刪除Twitter Bootstrap表格中單個單元格的表格懸停效果

回答

相關問題