如何在css中转换后更改图标上的“element.style”？

Question

我想更改图标的element.style。我想改变图标的​​颜色，这样当它被按下时，它的颜色与现在颜色不同。但我无法访问html，所以我想在CSS中执行此操作。

这通常是图标的html：

<span style="color:#000" class="icon-visible list_post_visible" aria-hidden="true"></span>

- css：

element.style {
color: rgb(0, 0, 0);
}
.story ul li .info .icon-visible {
position: absolute;
right: 8px;
bottom: 4px;
font-size: 19px;
cursor: pointer;
}

这是点击时图标的html：

<span style="color: rgb(51, 161, 201);" class="icon-visible list_post_visible" aria-hidden="true"></span>

- CSS：

element.style {
color: rgb(51, 161, 201);
}
.story ul li .info .icon-visible {
position: absolute;
right: 8px;
bottom: 4px;
font-size: 19px;
cursor: pointer;
}

我想在点击时将颜色：rgb（51,161,201）更改为css中的＃ffc600。

Answer 1

修改

出于测试目的，请尝试此CSS：

.story ul li .info .icon-visible {
    position: absolute;
    right: 8px;
    bottom: 4px;
    font-size: 19px;
    cursor: pointer;
}

.story ul li .info .icon-visible:active {
    color: #ffc600 !important;
    transition: none;
    -webkit-transition: none;
    -moz-transition: none;
}

使用CSS伪类:active

.story ul li .info .icon-visible:active {
    color: #ffc600;
}

-

您的完整CSS将是：

.story ul li .info .icon-visible {
    position: absolute;
    right: 8px;
    bottom: 4px;
    font-size: 19px;
    cursor: pointer;
}

.story ul li .info .icon-visible:active {
    color: #ffc600;
}