Question

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.

Demo of my problem:
http://www.sfu.ca/~jca41/stuph/jQueryTest/jQueryTest.html

$(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)"); 
    });

});

Answer 1

The “new” reply image is part of a CSS background. Therefore it’s not actually part of the DOM, and therefore jQuery can’t modify it or even detect when it’s moused over.

To get the result you want, you need to make the second button part of the DOM and hide/show it instead: http://jsfiddle.net/mblase75/tJwUW/3/

HTML:

Mouseover the reply image and it changes states
<div class="reply"></div>

<hr><hr><hr>

<div class="red">
<div class="reply"></div> <!-- added -->
Mouseover this, then mouseover the new reply image 
and notice it does not change state
</div>

CSS:

.reply {
    background-image:url('reply.png');
    height: 18px;
    background-repeat: no-repeat;
}
.red .reply { /* added */
    visibility: hidden;
}

JS:

$(".red").mouseover(function() { // modified
    $(this).css("color", "red").find(".reply").css('visibility','visible');
});
$(".red").mouseout(function() { // modified
    $(this).css("color", "black").find("reply").css('visibility','hidden');
});

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