jQuery :: live hover problem

Question

An example jsfiddle is here. Try to hover the red square and then hover the blue one. Why is it flickering? How can I prevent the blue square to disappear?

(This is actually a tab and it's ex icon, that appear only when hovered)

JavaScript:

$("#foo").live("mouseover mouseout", function(e) {
    if (e.type == "mouseover") {
       $("#foo").append("<div id='bar'>");
    } else {
        $("#bar").remove();
    }
});

CSS:

#foo {
 width: 100px;
 height: 50px;
 background: red;   
}

#bar {
    width: 10px;
    height: 10px;
    background: blue;
}

Thanks

Answer 1

Not sure what you intent todo, but is it what you're looking for: http://jsfiddle.net/PXExS/4/

$("#foo").live("mouseenter mouseleave", function(e) {
    if (e.type == "mouseenter") {
       $("#foo").append("<div id='bar'>");
    } else {
        $("#bar").remove();
    }
});

Answer 2

You can achieve the same thing by doing

$("#foo").live("hover", function(e) {
    $("#bar").toggle();
});

Check working example at http://jsfiddle.net/PXExS/9/