Question

I got a problem :/
I got a CSS thingy thast makes the background position change on hover. But after i run a function in javascript that changes the hover the CSS one stops working.

This is the function:

function tree() {
var boxfb = document.getElementById('fb_box');
var boxtw = document.getElementById('twitter_box');
var boxsun = document.getElementById('sun_box');
var boxtree = document.getElementById('tree_box');
var btn = document.getElementById('hbtr');
if(boxtree.style.visibility == "hidden") {
    boxtw.style.visibility="hidden";
    boxfb.style.visibility="hidden";
    boxsun.style.visibility="hidden";
    boxtree.style.visibility="visible";
    btn.style.backgroundPosition="-150px -100px";
}
else {
    boxtree.style.visibility="hidden";
    btn.style.backgroundPosition="-150px 0";
}

}

Live at http://enji.se (Press the tree in the top left corner)

Answer 1

Because you’re adding a ‘style’ attribute to your element, anything within this ‘style’ attribute will override any of your predefined CSS settings (it takes priority).
I this case, “btn.style.backgroundPosition=”-150px 0″;” is overriding your hover style of “-150px -100px”, by adding it directly to the element.

I’m not sure exactly what you’re going for here, and there’s probably a more simplistic way to do what you’re doing — but I suppose that’s not why you’re here…

So to fix your problem I would suggest one of two things:
    1) Add/Remove a class using javascript instead of a style attribute
–OR, as a quick fix-
    2) add ‘!important’ to Line 343 of your stylesheet, like so:

.tree:hover {
    background-position: -150px -100px !important;
}