Question

我有一个FlatIcon图标，并通过CSS对其进行了如下修改：

[class^="flaticon-"]:before, [class*=" flaticon-"]:before,
[class^="flaticon-"]:after, [class*=" flaticon-"]:after {

    font-size: 55px;
    color: red;

}

问题是我也必须通过jquery修改颜色。

我尝试了几种方法，例如：

$('.flaticon-car:before').css('color',"#4286f4");
$('.flaticon-car:after').css('color',"#4286f4");
$('.flaticon-car').css('color',"#4286f4");
$('.flaticon-car:before').css({"color":"#4286f4"});
$('.flaticon-car:after').css({"color":"#4286f4"});
$('.flaticon-car').css({"color":"#4286f4"});

在那之后，我尝试了这个：

$('.flaticon-car').click(function () {
    $(this).css('color','#4286f4');
});

对我没有任何帮助。您对我有什么想法吗？

Answer 1

您无法通过Jquery设置:after/before的样式

技巧是toggle课

查看示例：

$('.className').click(function () {
   $( this ).toggleClass("newClassName");
});

.className:after,.newClassName:after
{
    position: absolute;
    content: '';
    font-size: 55px;
    background: red;
    width: 15px;
    height: 15px;
    left: 120px;
}

.newClassName:after
{
    background: #4286f4;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="className"> hello className</div>

修改jquery中的FlatIcon图标的颜色

1 个答案: