在弹出窗口打开时向按钮添加 css 样式。关闭时将其删除

Question

我正在尝试使用 fa-cog 作为在 AngularJS 中使用 Angular UI 打开弹出窗口的按钮。我意识到使用 js/jQuery 是可能的，但我正在寻找 css/html 解决方案。

HTML:

<span
        class="fa fa-cog fa-2x"
        uib-popover-template="'popoverTemplate.html'"></span>

CSS:

fa.cog{
    color: grey;
}

fa.cog:hover{
    color: black;
}
//Doesn't work
fa.cog :active or :focus or :target etc.{
    color: black
}

我想做的是，当弹出窗口不显示时，齿轮应该是灰色的。当弹出窗口打开时，齿轮应该是黑色的。

我已经尝试过 css 选择器，例如 fa-cog:active 和 fa-cog:focus，但它们并没有起到多大作用。

不确定我该如何实现，有什么想法吗？

Answer 1

popover 指令有一个名为 tooltip-is-open 的辅助属性，它为您提供一个只读变量，告诉您 popover 是否打开。

然后您可以使用 ngClass 或 ngStyle 有条件地应用您的 css

<span class="fa fa-cog fa-2x"
    uib-popover-template="'popoverTemplate.html'"
    popover-is-open="iAmOpen"
    ng-class="{'active': iAmOpen}">
</span>

Answer 2

这应该有效

fa.cog{
    color: grey;
}

fa.cog:hover{
    color: black;
}

fa.cog:active, fa.cog:focus{
    color: grey;
}

您在活动或聚焦时设置的是黑色，而不是灰色

在弹出窗口打开时向按钮添加 css 样式。关闭时将其删除

Adding css style to button while popover is open. Remove it when it closes

html

css

angularjs

angular-ui-bootstrap