jQuery How to kill a Created Div?

What I have at the moment is a list of products (divs) that, when hovered over, a duplicate div is created and positioned over the original div 开发者_开发知识库(offset a bit and restyled using css). This new div is larger and offers more information that was being shown in the list view.

When I hover off the new div it is .remove()'d, however I have found that it does not do this immediately, and if I move my mouse fast enough the hover event is fired, but the mouseleave event is not (as such the new div is just left on screen).

What I have at the moment to detect when to remove the new div:

jQuery('.newDiv').mouseleave(function(){
  jQuery(this).remove();
});

How do I get my new div to check that the mouse is on/off it so that I can kill it correctly?

---

Have you thought about using CSS to patch it?

.newDiv{
  display:none;
}
  .newDiv:hover{
    display:block;
  } 

That way, unhover will hide the div anyway. Might be that the rendering agent is quicker than the JS engine, saving you that momentary glitch.

---

Maybe something like this:

jQuery('.newDiv').mouseleave(function() {
    var self = jQuery(this);
    setTimeout(function() {
        self.remove();
    }, 250);
});