jQuery - addClass() mouseover
<p>I have a jQuery effect where if the user mouse over the reply image, the image would change to another image. The problem I am having is that when you mouse over another object, which is set to addClass() for the reply image, this new reply image does not change its image when mouseovered. </p>

<p>Demo of my problem:
<a href="http://www.sfu.ca/~jca41/stuph/jQueryTest/jQueryTest.html" rel="nofollow">http://www.sfu.ca/~jca41/stuph/jQueryTest/jQueryTest.html</a></p>

<pre><code>$(document).ready(function(){

    $(".red").mouseover(function() {
        $(this).css("color","red");
        $(this).addClass("reply");
    });
    $(".red").mouseout(function() {
        $(this).css("color","black");
        $(this).removeClass("reply");
    });

    $(".reply").mouseover(function() {
        $(this).css("background-image", "url(reply_h.png)"); 
    });
    $(".reply").mouseout(function() {
        $(this).css("background-image", "url(reply.png)"); 
    });

});
</code></pre>
