jQuery .hover 작업에 실패했습니다.

Question

이것은 아마도 어리석은 짓 일 겁니다.하지만이 코드를 몇 번이고 반복해서 읽었을 때 작동하지 않는 이유를 알 수 없습니다. 여기

내 JS의 :

$(document).ready(function() { 
    $("#flame").hover(function() 
    { $(this).removeClass("normal").addClass("hover"); } 
    ); 
}); 

그리고 내 HTML :

<a href="javascript:void()"> 
<div id="flame" class="normal"></div> 
</a> 

모든 내 CSS, 좋은 측정을위한 : 내가 충분히 같은 jQuery를 효과를 사용했습니다

#flame { 
    margin:auto; 
    width: 180px; 
    height: 218px; 
} 

.normal { 
    background: url(../images/flame_normal.png); 
} 

.hover { 
    background: url(../images/flame_hover.png); 
} 

내가 비슷한 소스 코드로 만든 또 다른 js 파일을 가지고 있는데 왜 작동하지 않는지 이해할 수 없습니다.

Answer 1

jQuery 1.4 이전에는 .hover()이 2 가지 기능을 사용합니다. 두 번째 것을 추가하면 괜찮을 것입니다.

$(document).ready(function() { 
    $("#flame").hover(function() { 
       $(this).removeClass("normal").addClass("hover"); 
      }, function() { 
       $(this).removeClass("hover").addClass("normal"); 

     }); 
}); 

또한, 당신은 혼자 CSS에서이 문제를 처리 할 수 ​​있습니다 (브라우저 지원하지만 제한) :

#flame { 
    ... 
    background: url(../images/flame_normal.png); 
} 

#flame:hover { 
    background: url(../images/flame_hover.png); 
} 

Answer 2

는 이미지를 변화하고있는 유일한 것은, 당신은 CSS의 사이비을 사용할 수있는 경우 클래스 :

#flame { 
    margin:auto; 
    width: 180px; 
    height: 218px; 
    background: url(../images/flame_normal.png); 
} 

#flame:hover { 
    background: url(../images/flame_hover.png); 
}