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

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