javascript - 鼠标悬停时不隐藏对象

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