jQuery :: live hover问题

Question

这里有一个jsfiddle的例子.尝试将红色方块悬停,然后将蓝色方块悬停.为什么会闪烁？如何防止蓝色方块消失？

(这实际上是一个标签,它是前图标,仅在悬停时出现)

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;
}

谢谢

Answer 1

不确定你的意图是什么,但它是你正在寻找的:http://jsfiddle.net/PXExS/4/

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