CODEWITHSUNDEEP
javascriptjqueryhtmlcss
mayua
mayua

Reputation: 101

On mouseover do not hide the object

I have two red buttons del-row-td and del-column-td that are shown when I mouseover the blue table and hide when I mouseleave blue table.

enter image description here

What I need is to stop these red buttons disappear when I move the pointer over them. But make them disappear if I remove pointer both from them and from the blue table.

I am trying to do this via such code:

$(document).on('mouseover','.del-column-td',function(){
     $(this).removeClass("hide");
   });

$(document).on('mouseleave','.del-column-td',function(){    
   $('.del-column-td').addClass('hide');

});

$(document).on('mouseover','.del-row-td',function(){
     $(this).removeClass("hide");
   });

$(document).on('mouseleave','.del-row-td',function(){   
   $('.del-row-td').addClass('hide');

});

Here is the working demo. Could anyone suggest ideas why it does not work and how to make it work?

Upvotes: 0

Views: 41

Answers (1)

Rick Hitchcock
Rick Hitchcock

Reputation: 35670

Even though you've removed the hide class, your timer adds it back after a 1s delay:

setTimeout(function(){$($('.del-column-td')).addClass('hide');
$($('.del-row-td')).addClass('hide');},1000);

(Note that you don't need two $( in your code.)

To prevent the behavior you're seeing, assign setTimeout to a variable:

var timer;
$(document).on('mouseleave','.my-table',function(){ 
   timer = setTimeout(function() {
     $('.del-column-td').addClass('hide');
     $('.del-row-td').addClass('hide');
   }, 1000);  
});

Then clear the timer on mouseover:

$(document).on('mouseover','.del-column-td',function(){
    clearTimeout(timer);
});

$(document).on('mouseover','.del-row-td',function(){
    clearTimeout(timer);
});

Updated Fiddle

Upvotes: 2

Related Questions