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

}

住在 http://enji.se（按左上角的树）

Answer 1

因为您要向元素添加"style"属性，所以此"style"属性中的任何内容都将覆盖任何预定义的CSS设置（优先）。在这种情况下，"btn.style.backgroundPosition="-150px 0";" 通过将其直接添加到元素
中来覆盖您的悬停样式"-150px -100px"。
我不确定你在这里到底要做什么，可能有一种更简单的方式来做你正在做的事情——但我想这不是你来这里的原因......

因此，为了解决您的问题，我建议以下两件事之一：
    1） 使用 javascript 而不是样式属性
添加/删除类-或者，作为快速修复-
    2） 在样式表的第 343 行添加"！important"，如下所示：

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