css - 如何防止内联 CSS 链接 "color"取消 CSS 样式表链接 "hover"？

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 的行为 - 您愿意向元素添加一个类并改为设置样式吗？