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

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 class，您可以使用它来设置按钮样式：

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

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

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

Bootstrap-Vue b-dropdown button color when open

html

css

twitter-bootstrap

vue.js

bootstrap-vue