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

Question

我正在尝试将 fa-cog 用作使用 Angular UI 在 AngularJS 中打开弹出窗口的按钮。我意识到这可以使用 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
}

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

我已经尝试过像 fa-cog:active 和 fa-cog:focus 这样的 css 选择器，但它们并没有做太多事情。

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

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>