Javascript 使用.on（）关闭悬停jquery

我知道查询中的hover方法允许您指定用户悬停时发生的情况以及用户取消悬停时发生的情况。但是，我使用.on（）来处理悬停事件，因为内容是动态创建的。当用户取消悬停时，如何将其返回到原始状态。这是我的代码，我已经尝试了.off（），但它没有给出我想要的结果：

$('tr').on('hover', 'td', function(){
    $(this).fadeTo(500, 1 )    
})

以下是我尝试过的：

$('tr').off('hover', 'td', function(){
    $(this).fadeTo(500, .85 )         
})

---

谢谢。

如果要使用

.on（）

，处理程序的事件是“mouseenter”和“mouseleave”。您只需拨打一个电话即可：

$('tr').on({
  mouseenter: function() {
    $(this).fadeTo(500, 1); // or whatever
  },
  mouseleave: function() {
    $(this).fadeTo(500, 0.85); // or whatever
  }
}, 'td');

---

您也可以使用CSS，使用“：hover”伪类来实现这一点。在某种程度上，即使在旧版本的IE中，这也会起作用。您也可以设置更改的动画。

您可以在纯CSS中执行此操作，但现在您可以：

$('tr').on('mouseenter mouseleave', 'td', function( e ){       
    $(this).fadeTo(500, e.type=="mouseenter" ? 1 : 0.85 );    
});

使用悬停：

$('tr td').hover(function( e ){       
    $(this).fadeTo(500, e.type=="mouseenter" ? 1 : 0.85 );    
});

提示：

.on（'hover'

将不会像使用方法reference

$（选择器）那样单独绑定对
鼠标移动器mouseleave
事件的直接引用。hover（handlerIn，handlerOut）

，而只绑定

hover

事件

恢复：

$('tr').on('hover', 'td', function( e ){       
   // no separated "mouseenter" and no "mouseleave" e.type reference here :(
   // just "hover" event
});

$('tr').on('mouseenter mouseleave', 'td', function( e ){       
   // e.type are defined :)
});

$('tr').on('mouseenter', 'td', function( e ){       
   // function only for 'mouseenter' event
}).on('mouseleave', 'td', function(){
   // function only for 'mouseleave' event
});

$('tr td').hover(function( e ){       
   // e.type "mouseenter" and "mouseleave" are in event reference :)
});

// $("tr td").hover(handlerIn, handlerOut)

$('tr td').hover(function(){       
   // Method default // e.type reference == "mouseenter" 
}, function(){
   // Method default // e.type reference == "mouseleave" 
});

现在，这取决于您是需要使用

.on（）

（动态创建的元素）将事件委托给元素，还是

.hover（）

恰好适合您的需要

关于

.off（）

方法，您可以仔细查看它的功能：
基本上，如果在某个时刻您希望删除对元素的任何进一步的事件委派，而不是使用.off（）：

---

悬停不是事件，它是

mouseenter

和

mouseleave

事件处理程序的快捷方式

$('tr').on('mouseenter', 'td', function(){
    $(this).fadeTo(500, 1 )
}).on('mouseleave', 'td', function(){
    $(this).fadeTo(500, .85 )
})

$('tr').on('mouseenter', 'td', function(){

    $(this).fadeTo(500, 1 )

}).on('mouseleave', 'td', function(){

    $(this).fadeTo(500, .85 )


})

这就是你需要的

---

.hover只是一些速记功能…on（“mouseover mouseleave”）和.off（“mouseover mouseleave”）都是实际事件。我确实使用css来实现这一点，但我必须在悬停状态下做一些事情，而不是设计样式，这是我工作的目的question@SamCreamer我知道这就是我的想法。谢谢，是的，我确实在上面的例子中使用了CSS，但是我需要在hover中做一些事情，而不是使用样式，这就是我的原因ask@SamCreamer那么这应该会有帮助。@RokoC.Buljan很抱歉。我不记得事实。现在我会：）

$('tr').on('mouseenter', 'td', function(){

    $(this).fadeTo(500, 1 )

}).on('mouseleave', 'td', function(){

    $(this).fadeTo(500, .85 )


})

$('.element').hover(
    function () {
        $(this).fadeTo(500, 1);
    }, 
    function () {
        $(this).fadeTo(500, .85);
    }
);