7

我正在使用 Twitter Bootstrap 开发一个网络应用程序。在我们的一个视图中，有一个使用.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; }

不幸的是，它不起作用。我认为这可能是因为整行被突出显示，而不仅仅是单元格......

4

3 回答 3

15

这是引导 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-29T00:22:47.487 回答
0

我不确定使用什么方法来创建这些“悬停”，但是如果您分隔这些单元格，您可以添加特定的悬停规则。所以给这些单元格一个类名，然后你可以为它们设置你的特定样式/悬停。

于 2012-11-29T00:14:14.380 回答
0

我会向您不希望悬停的元素添加一个类，例如：

<tr>
  <td rowspan="2" class="no-hover">Row Group "Heading" 2</td>
  <td>Content</td>
  <td>Content</td>
  <td>Content</td>
</tr>

在您的 CSS/SCSS 中：

.table-hover {
  .no-hover {
    background-color: transparent !important;
  }
}

在 Bootstrap 4 中工作。

于 2020-03-06T10:49:09.607 回答