Bootstrap-Vue b-dropdown 按钮打开时的颜色

Question

下面的代码让我在按钮颜色和悬停方面得到了我需要的东西。但是，当菜单打开并且您将光标从按钮上移开时，按钮颜色会恢复为默认灰色。菜单打开时如何自定义按钮？

当前有效的代码：

<style scoped>
    /deep/ .dropdown > button {
        color:#001E61;
        background:#ffffff;
        border-color:#001E61;
        font-weight:bold;

    }
    /deep/ .dropdown > button:hover {
        color:#E81F76;
        background:#ffffff;
        border-color:#E81F76;
        font-weight:bold;
    }
</style>

代码我尝试在菜单打开时自定义按钮的颜色：

<style scoped>
    /deep/ .dropdown > button:hover,
    .dropdown > button:active,
    .dropdown > button:focus    {
        color:#E81F76;
        background:#ffffff;
        border-color:#E81F76;
        font-weight:bold;
    }
</scoped>

Answer 1

当下拉菜单展开时，.dropdown div 应用了一个.show 类，您可以使用它来设置按钮样式：

/deep/ .dropdown.show > button {
  background: red;
}

此外，如果您的项目是最新的，建议使用 >>> 而不是 /deep/，后者已被弃用。