Having jquery script working in unusual way

Having jquery script working in unusual way

I was using the following script on my webpage , it is a script to change
the image to another image when mouse is on the image and change it back
to the previous one when mouse leaves the image
$('#awake_skull').mouseleave(function(){
$(this).children().remove();
$('<img src="images/u169.png" style="float:left;">').appendTo($(this));
});
$('#awake_skull').mouseenter(function(){
$(this).empty();
$('<img src="images/u169-r.png" style="float:left;">').appendTo($(this));
});
but instead of this , my script changes the image when mouse is on it ,
but not change back to original one when mouse leave the . I am having no
error messages in chrome console as well . please point out where i went
wrong Thanks in advance