Looking for some assistance with using hover on externally loaded content.

I have a web page with a DIV that I LOAD with an external webpage.

The external webpage once loaded has a DIV that when hovered over PREPENDs items to the DIV .  This part seems to be working.

When the DIV is no longer hovered over the prepended items should be removed, but alas they are not.

Please take a look at the following and point out my error.

<script type="text/javascript">

//ADD THINGS

$("#apDiv10").live('hover', function(){$("#apDiv10").css('top','262px'),$("#apDiv10").css('height','auto'),$("#apDiv10 ").prepend('<a href="#" id="dog2" class="dog"><img src="/images/lessthan16.png"width="281" height="49" /><BR /></a><a href="#" id="dog3" class="dog" value="3"><img src="/images/ 16or17.png" width="281" height="49" /><BR /></a><a href="#" id="dog4" class="dog" value="4"><img src="/images/1819or20.png" width="281" height="49" /><BR /></a><a href="#" id="dog5" class="dog" value="5"><img src="/images/21orolder.png" width="281" height="49" /><BR /></a>'); },

//REMOVES THINGS

function () { $(".dog").remove(),$("#apDiv10").css('top','458px'),$("#apDiv10").css('height','auto');}

);

</script>

Thanks and looking forward to some great responses.