JQuery body delegate mouse and mouse at the same time

Question

I have a delegate on the body waiting for the sketch elements of the class on mouse and mouse.

 $('body').delegate('.thumbnail', 'mouseover mouseout', function(e){
            if(e.type=='mouseover' && !isMousingOver ){
              enlarge_thumbnail(this);
              isMousingOver = true;
              console.log('enlarged')
            }else if(e.type=='mouseout'){
              reset_thumbnail(this);
              isMousingOver = false;
              console.log('resetting')
            }
        })

but whenever I move the mouse within the frame of the div.thumbnail element, I get to the log increased reset increased reset increased reset increased reset ...

where enlarge_thumbnail and reset_thumbnail:

function enlarge_thumbnail(element_to_set, how_much) {
    element_to_set = $(element_to_set); // jQueryize the element;
          how_much = parseInt(how_much);// Make sure it an intger;
    if( element_to_set.length && !isNaN(how_much) ){
      element_to_set.css({width:how_much});
    }
  }

function reset_thumbnail(element_to_reset) {
    element_to_reset = $(element_to_reset); // jQueryize the element;
    element_to_reset.css({width:'200px'});
  }

If I do not move the mouse, and the mouse is stationary inside the border of the div.thumbnail element, then it does what I want: enlarge the thumbnail and DO NOT reset it.

What could be the problem?

Answer 1

This is because the design mouseoverand mouseoutlights up handler when you enter / leave descendants .thumbnail.

, mouseenter mouseleave. , , / .thumbnail, .