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

Question

我有一个元素，我在其中为 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";};

score 6 · Accepted Answer

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

CSS：

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

JavaScript：

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

score 2 · Accepted Answer

使用类！

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

基本的 JavaScript：

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

当然，您必须切换类。

score 0 · Accepted Answer

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

.clicked{color:red}

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

这将满足您的需求。

score -1 · Accepted Answer

-1

您可以使用!important JSFIDDLE

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

于 2013-05-03T19:08:34.047 回答

4 回答 4