CODEWITHSUNDEEP
javascriptjqueryhovermouseevent
Maito Parta
Maito Parta

Reputation: 35

jQuery mouseenter and mouseleave events fire out of control

I'm using this piece of code to populate a div with the contents of a hovered element. 

$('.gallery .thumbs a').hover(
  function(){
    var target = $(this);
    $('.hover-box').html(target.clone());
    var top = target.offset().top;
    var left = target.offset().left;
    $('.hover-box').css({'display':'block', 'top':top, 'left':left}); 
  },
  function(){
    $('.hover-box').hide();
  }
);

The problem is - what many seem to have had - that after adding the 'mouseleave' handler both the events start firing uncontrollably.

I know the bubbling issues related with mouseover/out but this seems to behave the same.

Anyone have an idea why this is happening?

EDIT:

Here's the deal on fiddle. Not the prettiest sight but function the same as my problem. FIDDLE

Upvotes: 0

Views: 1982

Answers (1)

Zach Saucier
Zach Saucier

Reputation: 25944

It's because your function fires and re-fires each hover and at the end of each hover, so any time you move the mouse it fires twice. What you want to do instead is fire it on mouseenter of .thumbs a and mouseleave of .hover-box, like this

jQuery(function () {
    jQuery('.thumbs a').hover(

    function () {
        var target = $(this);
        jQuery('.hover-box').html(target.clone());
        var top = target.offset().top;
        var left = target.offset().left;
        jQuery('.hover-box').css({
            'display': 'block',
            'top': top,
            'left': left
        });
    });
    $('.hover-box').mouseleave(function() {
        $('.hover-box').hide();
    });
});

Upvotes: 1

Related Questions