1

我遇到了一个问题：/ 我有一个 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（按左上角的树）

4

1 回答 1

4

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

我不确定您到底要做什么，并且可能有一种更简单的方式来做您正在做的事情-但我想这不是您来这里的原因...

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

.tree:hover {
    background-position: -150px -100px !important;
}
于 2011-05-14T23:35:54.393 回答