twitter-bootstrap 对选定行禁用悬停时的引导表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28441839/
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
Bootstrap table on hover disable for selected row
提问by MindGame
I'm using bootstrap for the on-hover effect for my table rows. But I want to remove the on-hover effect when a table row is selected. I set a class (select-row) using JavaScript when a row is selected. Does not seem to be working for me. I'm using the not clause in the css.
我正在使用引导程序为我的表格行提供悬停效果。但是我想在选择表格行时删除悬停效果。I set a class (select-row) using JavaScript when a row is selected. 似乎不适合我。我在 css 中使用了 not 子句。
My css:
我的CSS：
.table-hover > tbody > tr:not(.select-row):hover > td,
.table-hover > tbody > tr:not(.select-row):hover > th {
background-color: #f5fafe;
color: black;
}
tr.select-row {
background-color: #bddef9;
}
Html:
网址：
<table class="table table-condensed table-hover">
<tr>
<td>xxx</td>
<td>xxx</td>
</tr>
</table>
回答by Hyman
In order for the selected row background not to change, you need to specifically overwrite the existing hover style.
为了使选中的行背景不发生变化，您需要专门覆盖现有的悬停样式。
Bootstrap targets the tdbackground on hover rather than tr.
Bootstraptd以悬停时的背景为目标，而不是tr。
This works:
这有效：
.table-hover > tbody > tr.select-row:hover > td,
.select-row > td {
background-color: #bddef9;
}
Demo Fiddle
演示小提琴
回答by Axel Heider
Hyman's solution does not work for me (Chromium 62.0.3202.94). What I found working is something that uses the CSS :not()selector. So you give the class tableRowHoveras class for the table to enable a fancy mouse-over effect. It's defined in the CSS file as
Hyman的解决方案对我不起作用（Chromium 62.0.3202.94）。我发现工作的是使用 CSS:not()选择器的东西。因此，您将类tableRowHover作为表的类来启用奇特的鼠标悬停效果。它在 CSS 文件中定义为
.tableRowHover tbody tr:not(.tableRowHoverOff):hover td { .... }
and then you can use the class tableRowHoverOfffor every <tr>where you want to explicitly disable it.
然后您可以在要显式禁用它的tableRowHoverOff每个<tr>位置使用该类。
Fiddle Demo: http://jsfiddle.net/mk319zzm/
小提琴演示：http: //jsfiddle.net/mk319zzm/
回答by user3412566
jquery solution to this problem
jquery解决这个问题
$('tr').select(function()
{
$(this).removeClass('classtoremove');
});
you can now apply .css method to $(this) object
您现在可以将 .css 方法应用于 $(this) 对象
