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

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

问题描述

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

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:

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:

JavaScript :

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

演示

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