css - 你如何防止内联 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;
}

score 4 · Accepted Answer

您可以使用!important 覆盖内联 css

更好的是，不要只改变你的行为toggle_link——你宁愿给元素添加一个类并设置它的样式吗？

score 1 · Accepted Answer

在上使用:link、:visited和:active伪类<a>。

CSS：

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

2 回答 2