使用 Bootstrap 4 表和 SCSS 覆盖表悬停颜色的最佳方法？答案

【问题标题】：Best way to override the table-hover color using Bootstrap 4 tables and SCSS?使用 Bootstrap 4 表和 SCSS 覆盖表悬停颜色的最佳方法？
【发布时间】：2017-11-28 02:20:54
【问题描述】：

我们有一个启用了悬停选项的简单 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 覆盖行悬停颜色的最佳方法是什么？

【问题讨论】：

您是如何使用引导程序的 - 您是从外部 CDN 拉取还是将 SCSS 文件下载到您的项目中？

标签： css twitter-bootstrap sass bootstrap-4

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：