CSS和Javascript:更改颜色效果悬停样式的功能 [英] CSS and Javascript: Function to change color effects hover style
问题描述
我有一个元素,其中为CSS中的悬停状态设置文本颜色和不同的文本颜色。我有一些javascript,所以当我单击该元素,它更改元素的文本颜色。它工作正常,除了它也影响悬停CSS,我想保持与预点击悬停CSS相同。有没有反对停止悬浮css被影响或设置悬停CSS?
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;}
pre>
#test.active {color:red;}
#test:hover {color:green;}
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?
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'; }
这篇关于CSS和Javascript:更改颜色效果悬停样式的功能的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!