删除Twitter Bootstrap表中单个单元格的表格悬停效果

Question

我正在使用Twitter Bootstrap开发一个Web应用程序.在我们的一个视图中,有一个使用.table-hover该类的表.但是,当其余行突出显示时,表中有一些特定的单元格我不想突出显示.我应该使用什么样式规则来实现这种效果？

这大致是我的视图表的组织方式:

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

不幸的是,它不起作用.我想这可能是因为整个行都被突出显示,而不仅仅是细胞......

Answer 1

这就是bootstrap 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 */
}