你如何防止内联CSS链接“颜色”取消CSS样式表链接“悬停”？

Question

我希望我的链接***在点击时更改颜色，但在悬停时也会改变颜色。

我有一个javascript函数来更改单击时的颜色，但它需要内联CSS，这样可以保持我的样式表的悬停不起作用。

有没有办法让内联CSS和CSS样式表不被取消？或者是否有其他方法可以在点击时更改链接的颜色，而不会取消悬停颜色？

* （这些链接用于使用javascript显示隐藏的div）

脚本：

function toggle_link(select){
var color = select.style.color;
select.style.color = (color == "white" ? "yellow" : "white");
}

HTML：

<div id="gdtitle">
<a class="port" href="#" onclick="toggle('gdhide');toggle_link(this);" style="color:white">Graphic Design</a>
</div>

css样式表

a.port{
text-decoration: none;
color: white;
}
a.port:hover{
text-decoration: none;
color: yellow;
}

Answer 1

您可以使用!important to override inline css

更好的是，不但改变了toggle_link的行为 - 您是否愿意在元素中添加一个类并改为样式？

Answer 2

使用:link上的:visited，:active和<a>伪类。

CSS：

a.port, a.port:link, a.port:visited, a.port:active {
    text-decoration: none;
    color: white;
}