Jquery LIVE, with an append, is breaking the MouseOver

Question

Here's the code:

<p>Morbi vitae erat. Cras sem lorem, porta ut, aliquam id, porta sed, velit.
Pellentesque scelerisque erat rhoncus nulla. <span class="findme">find me</span>Integer pulvinar, est ut</p>

<script type="text/javascript">
$(document).ready(function() {

    $('.findme').live('mouseover mouseout', function(event) {
        if (event.type == 'mouseover') {
            // do something on mouseover
            $(this).css("background", "red");
            $(this).append('<span id="dropdown">XXX</span>');
        } else {
            // do something on mouseout
            $(this).css("background", "transparent");
            $('#dropdown').remove();
        }
    });

});
</script>

I want a dropdown element to appear next to the next, to allow the user to change a setting when they move their mouse over. Problem is that when the mouse rolls over the XXX, it triggers a the mouseout, even though it's inside the .findme Any ideas why that is? Or a better way to accomplish this effect?

Answer 1

Try using mouseenter and mouseleave.

.live({
    mouseenter:
       function()
       {

       },
    mouseleave:
       function()
       {

       }
   }
);

Answer 2

This is the standard behavior of mouseout. If you are using jQuery 1.4 then you should replace mouseover / mouseout with mouseenter / mouseleave.

EDIT: Some example code:

$(document).ready(function() {

    $('.findme').live('mouseenter', function(event) {
        $(this).css("background", "red");
        $(this).append('<span id="dropdown">XXX</span>');
    }).live('mouseleave', function(event) {
        $(this).css("background", "transparent");
        $('#dropdown').remove();
    });

});

Answer 3

This ended up working correctly:

$(".findme").mouseenter(function(){
    // do something on mouseover
    $(this).css("background", "red");
    $(this).append('<span id="dropdown">edit</span>');
}).mouseleave(function(){
    // do something on mouseout
    $(this).css("background", "transparent");
    $('#dropdown').remove();
});

Hopefully this helps others with a similar need.