Question

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

但如果我手动添加＆＃34; table-active＆＃34;背景颜色显示正常。上课：

<tbody id="tbod">
     <tr class="text-center table-active">              
          <td>...</td>      
     </tr>
</tbody>

我做错了什么？！谢谢！

Answer 1

只需添加：将鼠标悬停在您的td。

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

Bootstrap 4表悬停颜色

1 个答案: