jQuery .hover failing to work

Question

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.

Answer 1

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);
}

Answer 2

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);
}