css 为所选行禁用悬停时的引导表

ss2ws0br 于 2022-11-19 发布在其他

关注(0)|答案(4)|浏览(239)

我正在使用bootstrap为我的表行设置on-hover效果。但是我想在选择表行时删除on-hover效果。我在选择行时使用JavaScript设置了一个类（select-row）。似乎对我不起作用。我在css中使用了not子句。
我的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>

css

来源：https://stackoverflow.com/questions/28441839/bootstrap-table-on-hover-disable-for-selected-row

4条答案

按热度按时间

093gszye1#

为了使选定行的背景不发生更改，您需要专门覆盖现有的悬停样式。
引导程序将悬停时的td背景作为目标，而不是tr。
这是可行的：

.table-hover > tbody > tr.select-row:hover > td,
.select-row > td {
    background-color: #bddef9;
}

Demo Fiddle（第一个字母）

赞(0）回复(0）举报 2022-11-19

v8wbuo2f2#

Jack的解决方案不适用于我（Chromium 62.0.3202.94）。我发现工作的是使用CSS :not()选择器的东西。所以你给予tableRowHover类作为表的类，以启用花哨的鼠标悬停效果。它在CSS文件中定义为

.tableRowHover tbody tr:not(.tableRowHoverOff):hover td { .... }

然后您可以对每个要显式禁用<tr>的tableRowHoverOff使用类tableRowHoverOff。
小提琴演示：http://jsfiddle.net/mk319zzm/

赞(0）回复(0）举报 2022-11-19

lztngnrs3#

在Bootstrap v5中，您必须在<td>元素上设置box-shadow: none以覆盖悬停行为。
我花了很长时间才弄明白为什么:hover伪类没有background-color规则。他们应用了一种无限的嵌入框阴影来模拟背景颜色的变化，而实际上并没有覆盖它。

赞(0）回复(0）举报 2022-11-19

91zkwejq4#

jquery解决方案

$('tr').select(function()
{    
 $(this).removeClass('classtoremove'); 
});

现在可以将.css方法应用于$（this）对象

赞(0）回复(0）举报 2022-11-19

我来回答

css 为所选行禁用悬停时的引导表

4条答案

Demo Fiddle（第一个字母）

相关问题

热门标签

最新问答