javascript - 事件页面链接图标颜色

Question

大家好，我有一个关于事件页面链接颜色的问题。

我将此 javascript 代码用于事件页面链接。

$(".header a").filter(function(){
    return this.href == location.href.replace(/#.*/, "");
}).addClass("header_active_link");

这是CSS代码

.header{
    position: relative;
    height: 100%;
    float: right;
    width: auto;
    margin: 0;
    right: 0;
    top: 0;
    }
.icon{
   margin:0;
   margin-right:10px;
   padding:13px;
   height:23px;
   width:23px;
   color:blue;
   overflow:hidden;
   float:left;
   font-size:24px;
}
.icon-compass-2:before {
   content: "\e08b";
}
.header_active_link{
   color: #ffffff;
    }

这是 HTML

<div class="header">
  <a href="<?php echo $main_url.'about/'; ?>"><div class="icon icon-compass-2"></div></a>
</div>

在 CSS 代码中 .icon 颜色是主色。当用户单击链接时，它需要将文本颜色 color:blue; 更改为 color:#ffffff; 但不会更改。如何更改图标颜色？

Answer 1

你可以使用 CSS :active Selector

.header a:active { 
   color: #ffffff;
}