2

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

CamelCamelCamel
  • 5,200
  • 8
  • 61
  • 93

2 Answers2

5

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();
    }
});
karim79
  • 339,989
  • 67
  • 413
  • 406
Mrchief
  • 75,126
  • 20
  • 142
  • 189
  • Almost exactly the same as [my own conclusion](http://jsfiddle.net/davidThomas/PXExS/6/), +1! – David Thomas Aug 07 '11 at 21:56
  • woh. thanks. I followed comment from [here](http://stackoverflow.com/questions/2262480/jquery-live-hover): "As of jQuery 1.4.2, .live("hover") is equivalent to .live("mouseover mouseout"), NOT .live("mouseenter mouseleave") - see bugs.jquery.com/ticket/6077 So, do .live("mouseenter mouseleave", function() {...}), or .live("mouseenter", function() {...}).live("mouseleave", function() {...})". =/ – CamelCamelCamel Aug 07 '11 at 21:59
4

You can achieve the same thing by doing

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

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

Hussein
  • 42,480
  • 25
  • 113
  • 143