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

【问题标题】：Adding css style to button while popover is open. Remove it when it closes在弹出框打开时向按钮添加 css 样式。关闭时将其删除
【发布时间】：2018-05-27 12:33:10
【问题描述】：

我试图使用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 选择器，但效果不大。

不确定如何实现这一点，有什么想法吗？

【问题讨论】：

你可以用 js 来做 - 切换弹出窗口时添加一个类？
true，但如果可能的话，我更喜欢 CSS 解决方案。编辑问题。

标签： html css angularjs angular-ui-bootstrap

【解决方案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>

【讨论】：

谢谢，这是完美的。如果我使用button 而不是span，则设法使其与 :active 和 :focus 一起使用。但是如果用户再次单击按钮关闭弹出框，它会保持black 存在一个错误

【解决方案2】：

这应该可以工作

fa.cog{
    color: grey;
}

fa.cog:hover{
    color: black;
}

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

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

【讨论】：

不适用于<span>。 Kinda 可以与 <button> 一起使用，尽管它有一个错误，即如果您再次单击按钮关闭弹出框，它将保持黑色。