Javascript уничтожает CSS наведения

Question

У меня проблема: / Я понял, что CSS меняет положение фона при наведении курсора. Но после того, как я запустил функцию в javascript, которая меняет указатель мыши, CSS перестает работать.

Это функция:

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 (нажмите на дерево в верхнем левом углу)

Answer 1

Поскольку вы добавляете атрибут 'style' к своему элементу, все, что находится внутри этого атрибута 'style', будет переопределять любые ваши предопределенные настройки CSS (это имеет приоритет). В этом случае "btn.style.backgroundPosition =" - 150px 0 ";" переопределяет ваш стиль наведения «-150px -100px», добавляя его непосредственно к элементу.

Я точно не знаю, для чего вы здесь, и, возможно, есть более простой способ сделать то, что вы делаете, - но я полагаю, что это не то, почему вы здесь ...

Поэтому, чтобы решить вашу проблему, я бы предложил одну из двух вещей:
1) Добавить / удалить класс, используя javascript вместо атрибута стиля
- ИЛИ , как быстрое решение-
2) добавьте «важное» в строку 343 таблицы стилей, например:

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