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而不是style屬性添加/刪除類
- 或者 ，作為快速解決方案 -
2）將'！important'添加到樣式表的第343行，如下所示：

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