0

I have an element on my page that has different styles if the user is hovering over it or clicking it. Normally, the image is a snowflake. When the mouse is over it, the snowflake image is replaced with the same snowflake glowing blue, and when it's active, the image is replaced with the same glowing snowflake, but slightly smaller. This creates the illusion that the snowflake glows when hovered, and shrinks when the mouse is clicked.

However, I want to make it so the snowflake changes its look depending on the score. This is what I have for that:

var snowflakeBG = document.getElementById("MainSnowFlake");

changeFlakeImage = function(){
    if (mainScore >= 100){
        snowflakeBG.style.backgroundImage = "url(Images/Snowflake100BG.png)";
    }

This works just fine to replace the normal snowflake with the "snowflake100BG" once the user's score reaches 100. The problem is, I don't know how to also change the elements :hover and :active. Could someone please explain?

Improve this question
6
  • 1
    You can't change CSS pseudo classes with javascript, but just use classes with different CSS, and add and remove classes instead. Commented Nov 23, 2013 at 22:00
  • 1
    duplicate: stackoverflow.com/questions/4481485/… Commented Nov 23, 2013 at 22:01
  • 1
    Can you add another class, eg, .snowflake100, then override all the styles in the CSS file? Commented Nov 23, 2013 at 22:02
  • @adeneo Not directly, but you can manipulate the CSS itself, a bit hackish solution though. Commented Nov 23, 2013 at 22:18
  • @Teemu - indeed, but that answer sucks balls, it would be much easier to just insert a style tag into the head that overwrites the current styles, and give that style tag an ID so it can be easily removed, rather than accessing and changing the stylesheets, but then again, it would be even easier to just use classes. And, none of the above targets CSS psuedo classes, as that can't be done. Commented Nov 23, 2013 at 22:21
Related questions
0
jQuery change look af an active element?
1
css :hover and active conflits - a specific case
0
How to get a classic hover, active,etc. behavior with javascript
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.