javascript - 使用 .on() 关闭悬停 jquery

Question

我知道查询中的悬停方法允许您指定用户悬停时发生的情况以及用户悬停时发生的情况。但是，我使用 .on() 来处理悬停事件，因为内容是动态创建的。当用户取消悬停时，如何将其恢复到原始状态。这是我的代码，我尝试过 .off() 但它没有给出我正在寻找的结果：

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

这是我尝试过的：

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

谢谢。

score 12 · Accepted Answer

如果你想使用.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 中也可以使用。您也可以为更改设置动画。

score 11 · Accepted Answer

这就是你需要的

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

    $(this).fadeTo(500, 1 )

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

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


})

score 6 · Accepted Answer

你可以在纯 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'不会mouseenter mouseleave像使用 Method reference 那样单独绑定对事件的直接引用$(selector).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() 的元素更进一步的事件委托：

$('#selector').on('click', 'button', function(){

  // Function callback:
  alert('I will alert only once cause of off()');
  $('#selector').off('click', 'button');

});

score 3 · Accepted Answer

悬停不是事件，它是事件处理程序的mouseenter快捷方式mouseleave

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

score 0 · Accepted Answer

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

javascript - 使用 .on() 关闭悬停 jquery

5 回答 5

Related

Reference