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

因为您正在向您的元素添加“样式”属性，所以此“样式”属性中的任何内容都将覆盖您预定义的任何 CSS 设置(它具有优先权)。 在这种情况下，“btn.style.backgroundPosition="-150px 0";"通过直接将其添加到元素来覆盖“-150px -100px”的悬停样式。

我不确定你来这里的确切目的，而且可能有更简单的方法来做你正在做的事情——但我想这不是你来这里的原因……

因此，要解决您的问题，我会建议以下两件事之一:
1) 使用 javascript 而不是样式属性添加/删除类
-或，作为快速修复-
2) 将“!important”添加到样式表的第 343 行，如下所示:

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