jQuery .hover failing to work

This is probably something ridiculously stupid, but I've gone over this code again and again, and can't seem to figure why it won't work.

Here's my JS:

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

And my HTML:

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

Any my CSS, for good measure:

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

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

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

I've used the same jQuery effect enough times, I've even got another js file I created开发者_开发技巧 with a similar source code, yet I can't understand why it's not working.

Prior to jQuery 1.4, .hover() takes 2 functions. Add the second one and you should be fine.

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

      });
});

Also, you can handle this in css alone (browser support is limited though):

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

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

If the only thing you are doing is changing the image, you can use a CSS pseudo-class:

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

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