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

【问题标题】：How do you prevent inline CSS link "color" from canceling out CSS stylesheet link "hover"?你如何防止内联 CSS 链接“颜色”取消 CSS 样式表链接“悬停”？
【发布时间】：2012-06-27 07:30:45
【问题描述】：

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

我有一个 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;
}

【问题讨论】：

因此您希望它在每次点击时切换白色/黄色，但始终将鼠标悬停在黄色上。所以如果它当前是黄色的，你希望它在悬停时保持黄色。对吗？
对。当它切换白色/黄色时，它也会切换隐藏的 div。（即白色=隐藏黄色=不隐藏）

标签： css colors hover toggle inline-styles

【解决方案1】：

你可以使用!importantto override inline css

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

【讨论】：

我在悬停中添加了 !important 并且效果很好。（颜色：黄色！重要；）

【解决方案2】：

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

CSS：

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

【讨论】：

我的印象是toggle_link 的功能与:active 的功能不同
必须同意@ThinkingStiff； :active 伪类是一个比使用 click 事件处理程序来改变样式更好的解决方案。它也更有用，因为 :active 与键盘导航一起使用，而点击处理程序仅适用于鼠标点击
当您单击链接时，它会切换打开一个隐藏的 div。当这个 div 打开时，我希望链接变为黄色。 :active 伪类没有这样做。