mouseenter event called twice even after stopPropagation

Question

I\'m new to jquery and am facing now a weird problem. I succeeded to narrow it down to the fact that a mouseenter event is called twice: once for the containing div (this was my

Answer 1

You can keep the code from getting stuck by using a flag, so that you can detect when you get double mouseenter events:

$(function(){

  var inside = false;

  $(".testDiv").hover(
    function(e) /* IN */ {
      if (!inside) {
        inside = true;
        $(this).data("htmlBackup", $(this).html());
        $(this).html("TEST 123");
      }
    }, function(e) /* OUT */ {
      inside = false;
      $(this).html($(this).data("htmlBackup"));
    }
  );

});

http://jsfiddle.net/rFqyP/16/

This will however not solve the problem with the size difference. When you leave the element by moving out by the bottom border, it grows and causes a mouseenter event, which again changes the size so that the mouse is outside but without causing a mouseleave event, leaving the element looking like the mouse is still hovering it.

Remving the border from the p elements solves the problem completely, without a need for a flag, as it's the border that is causing the size difference.