在鼠标悬停时不要隐藏对象

Question

我有两个红色按钮del-row-td和del-column-td，当我将鼠标移到蓝色表格时显示，当我鼠标移动蓝色表格时隐藏。

当我将指针移到它们上面时，我需要停止这些红色按钮消失。但是如果我从它们和蓝色表中删除指针，就让它们消失。

我试图通过这样的代码来做到这一点：

$(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');

});

这是working demo。任何人都可以建议为什么它不起作用以及如何使其工作？

Answer 1

即使您已移除hide课程，您的计时器也会在延迟1秒后将其重新添加：

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

（请注意，您的代码中不需要两个$(。）

要防止您看到的行为，请将setTimeout分配给变量：

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

然后清除mouseover上的计时器：

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

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

Updated Fiddle