Mouseleave only triggering as expected in Chrome

Mouseleave only triggering as expected in Chrome

Hello,

The following seems to work only in Chrome, and it does not seem to work in IE8, FireFox, and Opera:
  1. $("#divMain").on({
  2.     mouseenter: function() {
  3.         $(this).closest( ".widget" ).find( ".divButtons" ).show();
  4.     },
  5.     mouseleave: function() {
  6.         $(this).closest( ".widget" ).find( ".divButtons" ).hide();
  7.     }
  8. }, ".widget");
In Chrome, if you drag the ".widget" far enough away from the other widgets, so when you let go of the ".widget", so the mouse pointer is not hovering over any ".widget", you will notice that the ".divButtons" will "hide", which is the behaviour I would expect.

However, on the other browsers, if I do the same thing, i.e. let go of a ".widget" after dragging it far enough so after letting it go, the mouse pointer is not hovering over any ".widget", the ".divButtons" does not disappear, which is not what I expect.  So you have to "mouseenter" and then "mouseout" to "hide" the ".divButtons".  It should happen automatically as it does in Chrome.

Here is a jsFiddle which shows it working nicely in Chrome, but not working as expected in other browsers.

Anyone know how to correct this?