twitter-bootstrap 删除 Twitter Bootstrap 表格中单个单元格的表格悬停效果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13616625/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Remove table-hover effect for a single cell in a Twitter Bootstrap table
提问by Kevin
I'm working on a web app using Twitter Bootstrap. In one of our views, there is a table that uses the .table-hoverclass. There are some specific cells in the table that I don't want to highlight when the rest of their rows highlight, though. What style rules should I use to achieve this effect?
我正在使用 Twitter Bootstrap 开发一个网络应用程序。在我们的一个视图中，有一个使用.table-hover该类的表。但是，我不想在表格中的其他行突出显示时突出显示表格中的某些特定单元格。我应该使用什么样式规则来实现这种效果？
This is roughly how my view table is organized:
这大致是我的视图表的组织方式：
<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>
I want to make the cells that span 2 rows not highlight when they are hovered over.
我想让跨越 2 行的单元格在悬停时不突出显示。
EDIT:
编辑：
I tried this CSS:
我试过这个CSS：
td.rowTitle:hover { background-color: transparent; }
It doesn't work, unfortunately. I think it may be because the whole row is being highlighted, not just the cell...
不幸的是，它不起作用。我认为这可能是因为整行都被突出显示，而不仅仅是单元格......
回答by mccannf
This is what the bootstrap CSS looks like:
这是引导 CSS 的样子：
.table-hover {
tbody { tr:hover td, tr:hover th
{ background-color: @tableBackgroundHover; }
}
}
With a bit of JQuery:
使用一些 JQuery：
$('td[rowspan]').addClass('hasRowSpan');
You can then use the following CSS to override it:
然后，您可以使用以下 CSS 来覆盖它：
tbody tr:hover td.hasRowSpan {
background-color: none; /* or whatever color you want */
}
回答by Omega
I'm not sure what method is used to create those "hovers", however you can add specific rules for hover if you seperate those cells. So give those cells a class name and you can then set your specific styles/hovers for them.
我不确定使用什么方法来创建这些“悬停”，但是如果您将这些单元格分开，您可以添加特定的悬停规则。因此，给这些单元格一个类名，然后您可以为它们设置特定的样式/悬停。
回答by xylar
I would add a class to the element that you don't want the hover e.g.:
我会向您不希望悬停的元素添加一个类，例如：
<tr>
<td rowspan="2" class="no-hover">Row Group "Heading" 2</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
In your CSS/SCSS:
在你的 CSS/SCSS 中：
.table-hover {
.no-hover {
background-color: transparent !important;
}
}
Working in Bootstrap 4.
在 Bootstrap 4 中工作。
