JavaScript破壞CSS懸停

Question

我遇到了問題：/ 我收到了一個CSS thingy，使得懸停時的背景位置發生變化。但是，我在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刪除類 - OR，作爲一個快速FIX-
    2）在樣式表的第343行添加'！important'，如下所示：

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