html – 用于选定行的hover禁用引导表

发布时间：2020-12-14 23:25:16 所属栏目：资源来源：网络整理

导读：我正在使用bootstrap来为我的表行设置on-hover效果.但是我想在选择表格行时删除悬停效果.我选择一行时使用 JavaScript设置一个类(select-row).似乎不适合我.我正在使用CSS中的not子句. 我的css： .table-hover tbody tr:not(.select-row):hover td,.table-ho

我正在使用bootstrap来为我的表行设置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>

解决方法

为了不更改选定的行背景,您需要专门覆盖现有的悬停样式.

Bootstrap在hover而不是tr上定位td背景.

这有效：

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

Demo Fiddle

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!