CSS and Javascript: Function to change color effects hover style

Question

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

Denys Séguret · Accepted Answer · 2013-05-03 19:10:44Z

6

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

answered May 3, 2013 at 19:10

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user2219915 Over a year ago

Thanks! I might add that if the element already has a class with styles, I would need to give the new class those same styles as well.

epascarello · Accepted Answer · 2013-05-03 19:09:05Z

2

Use classes!

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

Basic JavaScript:

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

Of course you would have to toggle the classes.

answered May 3, 2013 at 19:09

epascarello

208k20 gold badges206 silver badges246 bronze badges

Comments

mikeswright49 · Accepted Answer · 2013-05-03 19:14:20Z

0

The issue that you are running into is the concept of specificity in css. Specificity controls what rules get applied and in what order. Because the javascript updates the style element, it will override the specificity and erase all previous rules regarding the color styling. so instead add a class eg "clicked" to the element. where clicked is your new color

.clicked{color:red}

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

This will do what you need.

answered May 3, 2013 at 19:14

mikeswright49

3,41622 silver badges22 bronze badges

Comments

Anoop · Accepted Answer · 2013-05-03 19:08:34Z

-1

You can use !important JSFIDDLE

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

answered May 3, 2013 at 19:08

Anoop

23.2k10 gold badges65 silver badges79 bronze badges

Collectives™ on Stack Overflow

CSS and Javascript: Function to change color effects hover style

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related