使用Bootstrap 4表和SCSS覆盖表悬停颜色的最佳方法是什么？

Question

我们有一个简单的Bootstrap 4（alpha 6）表，启用了悬停选项。

<table class="table table-hover">
  <tbody>
    <tr>
        <td>Sample 1</td>
        <td>Data 1</td>
    </tr>
    <tr>
        <td>Sample 2</td>
        <td>Data 2</td>
    </tr>
  </tbody>
</table>

Here is the documentation to the Bootstrap 4 table options。 Bootstrap 4似乎在SCSS中使用悬停状态。

使用SCSS覆盖行悬停颜色的最佳方法是什么？

Answer 1

这是实现这一目标的唯一方法，对于css和scss来说都是一样的

.table-hover> tbody> tr:hover{
    background-color:yellow;
}

Answer 2

只需将“teal”替换为您想要的任何颜色，或者如果您不想要悬停效果，请将其设置为与背景颜色相同的颜色。

这是一个链接。 https://codepen.io/MikeIke/pen/PjJoGN

tr:hover{
    background-color:teal !important;
}