Question

现在我有a元素将按钮的颜色更改为蓝色......我想要做的事情我认为非常简单，但是我对CSS没有足够的了解。

我想在不删除当前类的情况下执行另一个类，我该怎么做？

jsFiddle

代码：

<div> 
<div class='btn btn-success'> 
<a href='javascript:Addlog(" + id + ");' role='button'> 
<i class='fa fa-pencil-square-o'></i> Complete</a> 
</div></div> 

CSS：

a, .a { 
    color: #003F8F; 
} 

a:hover, a:focus { 
    color: #23527c; 
    text-decoration: underline; 
} 

我想补充一点，如：

a, .a { 
     color: white; 
    } 

    a:hover, a:focus { 
     color: white; 
     text-decoration: none; 
    } 

但不删除当前的CSS为不影响已存在的代码

Answer 1

使用CSS类，然后可以从任意元素动态添加或删除该类。

.light { 
    color: white; 
} 

a.light:hover, 
a.light:focus { 
    color: white; 
    text-decoration: none; 
} 

JS例如，假设你的链接有class="color-change-button"：

document.querySelector('.color-change-button').addEventListener('click', function() { 
    this.classList.toggle('light'); 
}); 

https://jsfiddle.net/DTcHh/27351/