CSS 和 Javascript：更改颜色效果悬停样式的功能答案

【问题标题】：CSS and Javascript: Function to change color effects hover styleCSS 和 Javascript：更改颜色效果悬停样式的功能
【发布时间】：2013-04-28 06:29:55
【问题描述】：

我有一个元素，我在 CSS 中为悬停状态设置了文本颜色和不同的文本颜色。我有一些 javascript，所以当我单击元素时，它会更改元素的文本颜色。它工作正常，除了它也会影响悬停 CSS，我希望保持与预单击悬停 CSS 相同。有没有办法阻止悬停 CSS 生效或设置悬停 CSS？

CSS：

#test {color: blue;}
#test:hover {color:green;}

HTML：

<div id="test" onClick="javascript:change()">qwerty</div>

Javascript：

function change() {document.getElementById("test").style.color="#cc0000";};

【问题讨论】：

【解决方案1】：

你可以使用!importantJSFIDDLE

#test:hover {color:green!important;}

【讨论】：

【解决方案2】：

使用类！

#test {color: blue;}
#test:hover, #test.foo:hover {color:green;}
#test.foo { color : #cc0000 }

基本 JavaScript：

function change() {document.getElementById("test").className = "foo"; };

当然，您必须切换类。

【讨论】：

【解决方案3】：

而不是直接设置颜色，它会更干净（使用类更有效）。

CSS：

#test {color: blue;}
#test.active {color:red;}
#test:hover {color:green;}

JavaScript：

function change() {
   document.getElementById("test").className='active';
}

【讨论】：

【解决方案4】：

您遇到的问题是 css 中的特异性概念。特异性控制应用哪些规则以及应用顺序。因为 javascript 更新了样式元素，它将覆盖特异性并删除所有先前关于颜色样式的规则。所以改为向元素添加一个类，例如“点击”。点击的地方是你的新颜色

.clicked{color:red}

function change() {document.getElementById("test").class += " clicked"};

这将满足您的需求。

【讨论】：