Question

22

CSS and Javascript: Function to change color effects hover style

rated 0 times [ 24] [ 2] / answers: 1 / hits: 21094 / 11 Years ago, fri, may 3, 2013, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

ryderalfonsos

Add To Favorites

Follow

Total Points: 655

Total Questions: 88

Total Answers: 91

Location: Nauru

Member since Thu, Feb 2, 2023

1 Year ago

ryderalfonsos questions

1 React application with Service Worker - Force update of browser cache on new version

Tue, Dec 1, 20, 00:00, 4 Years ago

1 Call Action Method on button click ASP.NET MVC

Mon, Sep 9, 19, 00:00, 5 Years ago

1 Customizing the JS/CSS in a TrustPilot widget

Wed, Feb 13, 19, 00:00, 5 Years ago

1 How to display a string javascript in HTML

Tue, Feb 12, 19, 00:00, 5 Years ago

1 How to make an undo function in canvas?

Fri, Dec 28, 18, 00:00, 6 Years ago

View All

answered 11 Years ago warren · Accepted Answer

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