改变悬停样式颜色效果的函数

CSS and Javascript: Function to change color effects hover style

本文关键字：函数 颜色 悬停 样式 改变      更新时间：2023-09-26

我有一个元素，我为CSS中的悬停状态设置了一个文本颜色和一个不同的文本颜色。我有一些javascript，当我点击元素时，它会改变元素的文本颜色。它工作得很好，除了它也影响悬停CSS，我想保持相同的预点击悬停CSS。无论如何，要么停止悬停css的影响或设置悬停css ?

http://jsfiddle.net/77zg8/

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";};

不直接设置颜色，使用类会更简洁(也更有效)。

CSS: 

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

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

使用类!

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

基本JavaScript: 

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

当然你必须切换类

您遇到的问题是css中的专一性概念。专用性控制应用什么规则以及以什么顺序。因为javascript更新了style元素，所以它将覆盖该专一性并擦除之前所有关于颜色样式的规则。因此，取而代之的是给元素添加一个类，例如"clicked"。点击的地方就是你的新颜色

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

您可以使用!important JSFIDDLE

#test:hover {color:green!important;}
相关文章：