Javascript Jquery/CSS：如何在mouseenter事件上延迟1秒应用addClass。

这是我的代码，addClass正在工作。 但是当我尝试使用delay或setTimeout函数时，它不起作用

我不想在CSS中使用webkit属性

请告知是否有人较早地遇到此问题

  $(document).ready(function(){
          $('#table_Id tr td').mouseenter(function(){ 
               $(this).parent('tr').addClass('blueBgColor'); 
            });
  });

使用时，它会在指定的延迟后调用函数或执行代码段

$(document).ready(function() {
    $('#table_Id tr td').mouseenter(function() {
        var self = this; //Cache this in a variable
        setTimeout(function() {
            $(self).parent('tr').addClass('blueBgColor');
        }, 1000); //Here delay in milliseconds
    });
});

编辑：使用

bind

$(document).ready(function() {
    $('#table_Id tr td').mouseenter(function() {
        setTimeout(function() {
            $(this).parent('tr').addClass('blueBgColor');
        }.bind(this), 1000); //Here delay in milliseconds
    });
});

试试这个

$('#table_Id tr td').off('mouseenter').on('mouseenter', function() {
    var element = this;
    setTimeout(function() {
        $(element).parent('tr').addClass('blueBgColor');
    }, 1000); /*delay for 1 sec*/
});

 $('#table_Id tr td').mouseenter(function(){
    var $this = $(this); 
    setTimeout(function () {
           $this.parent('tr').addClass('blueBgColor');        
   }, 1000);
});

试试这个

$('#table_Id tr td').off('mouseenter').on('mouseenter', function() {
    var element = this;
    setTimeout(function() {
        $(element).parent('tr').addClass('blueBgColor');
    }, 1000); /*delay for 1 sec*/
});

 $('#table_Id tr td').mouseenter(function(){
    var $this = $(this); 
    setTimeout(function () {
           $this.parent('tr').addClass('blueBgColor');        
   }, 1000);
});

---

嘿，我已经为你的问题创建了一个JSFIDLE

代码：-

 $(document).ready(function() {
     $('#table_Id tr td').mouseenter(function() {
         var td = $(this);
         setTimeout(function() {
             td.parent('tr').addClass('blueBgColor');
         }, 1000);
     });
 });

工作示例：-

谢谢

或：

$(document).ready(function(){
  var myTimeout;
  // use event.target
  $('#table_Id tr td').on("mouseenter", function (e) {
    myTimeout = setTimeout(function () {
      $(e.target).parent('tr').addClass('blueBgColor');
    }, 1000);
  });
});

---

如果不存在toggle类，则可能需要使用toggle类，否则在每次鼠标上都会反复添加该类：

$('#table_Id tr td').mouseenter(function(){
    $td = $(this);
    setTimeout(function(){$td.toggleClass('addedClass',true)},'1000');
});

---

你如何使用StimeTimeOutlook函数？？？AddioC类会在每一个事件中添加类，如果你不考虑添加类，则它不存在ToGLCGLASS（‘CordNeX’，true），不应该是<代码> var自= $（this）；code>？@Carl，为什么我不能使用

$（self）

？如果你朝这边走，最好像这样把它传递给超时：setTimeout（function（）{..}.bind（this），1000）@YairTavor你试过那样绑它吗？那不起作用。这真是一个很快的回答。它对我非常有效。非常感谢，朋友。非常感谢。您希望将

$（this）

设置为setTimeout范围之外的变量，因为您在其中访问的

$（this）

将引用setTimeout本身，而不是触发mouseenter事件的元素。啊，是的，没有刷新。你的解决方案现在在我看来是正确的：）[编辑：请注意，我不是反对者]没问题。。但是我很感激你评论了正确的事情：）有了这个，我们可以推迟应用addClass。如果我只想在悬停2秒时更改行的颜色？如何实现这一点？请注意：您希望将$（this）in设置为setTimeout范围之外的变量，因为您在其中访问的$（this）将引用setTimeout本身，而不是触发mouseenter事件的元素。错误！它将向表中的所有TR添加类！