Bootstrap 4 表格悬停颜色答案

【问题标题】：Bootstrap 4 table hover colorBootstrap 4 表格悬停颜色
【发布时间】：2018-04-15 01:56:37
【问题描述】：

我正在努力更改 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>

我做错了什么？！谢谢！

【问题讨论】：

我不确定你在问什么。您想在将鼠标悬停在一行上时更改其颜色吗？如果是这样，只需添加：悬停。 table.table-hover tbody tr td:hover { background-color: #fb9692; }
做到了（实际上是 tr:hover），当你不做 css 太久时发生的那种不幸。请发布答案，以便我接受，谢谢。
太棒了！这只是一个小错误。 :)

标签： css twitter-bootstrap bootstrap-4

【解决方案1】：

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

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

【讨论】：