Question

I have the following jQuery code to replace an image when you hover over with the mouse but it doesn’t seem to be working. What is wrong with the code below?

$(function() {
$("div.delete img")
    .mouseover(function() {
        $(this).attr("src", "../../images/comment-hover-del.png");
    })
    .mouseout(function() {
        $(this).attr("src", "../../images/comment-del.png");
});
 });

This is my HTML:

<div class="delete" id="26"><img src="../../images/comment-del.png" border="0"></div>

Answer 1

You can rearrange it a bit, like this:

$(function() {
  $("div.delete").hover(function() {
     $("img", this).attr("src", "../../images/comment-hover-del.png");
  }, function() {
     $("img", this).attr("src", "../../images/comment-del.png");
  });
});

This is triggered on hover of the div, since there might be a slight flash when the image changes, resulting in the image collapsing and the mouseout firing before the next image loads. I’d assign a width/height to the <div> if you use the method above to prevent this behavior, or to the image if you use your current method.

Alternatively, you could give the div a background-image css property and the <div> itself a hover (removing the <img> completely) and do this all in CSS, like this:

div.delete { 
  width: 100px; 
  height: 100px; 
  background-image: url('../../images/comment-del.png') center;
}
div.delete:hover { 
  background-image: url('../../images/comment-hover-del.png') center;
}