CSS和Javascript：更改颜色效果悬停样式的功能 [英] CSS and Javascript: Function to change color effects hover style

问题描述

我有一个元素，其中为CSS中的悬停状态设置文本颜色和不同的文本颜色。我有一些javascript，所以当我单击该元素，它更改元素的文本颜色。它工作正常，除了它也影响悬停CSS，我想保持与预点击悬停CSS相同。有没有反对停止悬浮css被影响或设置悬停CSS？

http://jsfiddle.net/77zg8/

CSS：

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

HTML：

 < div id =testonClick =javascript ：change（）> qwerty< / div> 
  

Javascript：

 code> function change（）{document.getElementById（test）。style.color =＃cc0000;}; 
  

解决方案

而不是直接设置颜色， （和使用类更有效）。

CSS：

  #test {color：blue;} 
＃test.active {color：red;} 
 #test：hover {color：green;} 
  pre> 
 
 
 JavaScript：
  function change（）{
 document.getElementById（test）。className ='active'; 
} 
  
 演示 
 
I have an element where I set a text color and a different text color for the hover state in the CSS. I have some javascript so that when I click the element, it changes the text color of the element. It works fine except that it also effects the hover CSS which I want to remain the same as the pre-clicked hover CSS. Is there anyway to either stop the hover css from being effected or to set the hover 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";};

解决方案
Instead of setting the color directly, it would be cleaner (and more effective to use a class).

CSS :
#test {color: blue;}
#test.active {color:red;}
#test:hover {color:green;}
JavaScript :
function change() {
   document.getElementById("test").className='active';
}
demonstration

                        
这篇关于CSS和Javascript：更改颜色效果悬停样式的功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！