Javascript가 CSS 호버를 소멸시킵니다.

Question

문제가 있습니다./ 나는 CSS를 가져 왔고, 호버 위에 배경 위치가 변경되었습니다. 하지만 내가 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'속성 내의 어떤 것이라도 미리 정의 된 CSS 설정보다 우선합니다 (우선 순위가 적용됩니다). 이 경우 "btn.style.backgroundPosition ="- 150px 0 ";" '-50px -100px'의 마우스 오버 스타일을 요소에 직접 추가하여 재정의합니다.

나는 네가하는 일에 대해 정확히 모르겠다. 아마도 네가하고있는 일을하는 더 단순한 방법 일 것이다. 그러나 나는 네가 여기있는 이유가 아니라고 생각한다. ...

그래서 제안 당신의 문제를 해결하기 위해 두 가지 중 하나를
    1) 대신에 스타일 속성
의 자바 스크립트를 사용하여 클래스를 추가/제거 -로, 또는 빠른 fix-
    2) 다음과 같이 스타일 시트의 343 줄에 '! important'를 추가하십시오 :

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