0

我有两个红色按钮 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');

});

这是工作演示。谁能提出想法为什么它不起作用以及如何使它起作用？

4

1 回答 1

2

即使您已删除该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);
});

更新小提琴

于 2018-05-09T22:04:59.870 回答