gpt4 book ai didi

css - Bootstrap 4 表格悬停颜色

转载 作者:太空宇宙 更新时间:2023-11-04 07:26:34 25 4
gpt4 key购买 nike

我正在努力更改 Bootstrap 4.1 表中的悬停颜色,使用砂岩主题,我当前的代码不会影响悬停行的颜色:

<head>  
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/4.1.0/sandstone/bootstrap.min.css" rel="stylesheet" >

<style type="text/css">
table.table-hover tbody tr.table-active td {
background-color: #fb9692;
}
</style>
</head>

<body>
<div class="table-responsive" id="filesTable">
<script id="filesTmpl" type="text/x-handlebars-template">
<table class="table table-bordered table-hover">
<thead>
<tr class="text-center" style="font-weight: bold;">
<th scope="col">Filename</th>
<th scope="col">Status</th>
<th scope="col">Submitted on</th>
</tr>
</thead>
<tbody id="tbod">
{{#.}}
<tr class="text-center">
<td class="text-left">{{this.originalFilename}}</td>
<td>{{this.status}}</td>
<td>{{this.submissionDate}}</td>
</tr>
{{/.}}
</tbody>
</table>
</script>
</div>
</body>

但如果我手动将“table-active”类添加到 :

,背景颜色显示正常
<tbody id="tbod">
<tr class="text-center table-active">
<td>...</td>
</tr>
</tbody>

我做错了什么?!谢谢!

最佳答案

只需将 :hover 添加到您的 td。

table.table-hover tbody tr td:hover {
background-color: #fb9692;
}

关于css - Bootstrap 4 表格悬停颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49834117/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com