不能让jquery悬停使用.live（）

问题描述：

$('.edit_hover').live('hover', 
    function(e){   
     $(this).stop(); 
     var half_width = ($(this).css('width').slice(0, -2))/2; 
     var half_height = ($(this).css('height').slice(0, -2))*0.3; 
     console.log(half_width); 
     var top = ($(this).position().top) + half_height; 
     var left = ($(this).position().left) + half_width; 
     $('#edit_hover').css('top', top).css('left', left).fadeIn(300); 
     //add overlay 
     $(this).css('position', 'relative').append('<div class="edit_overlay" style="position: absolute; top:0px; left:0px; height:100%; width: 100%; background: #999; opacity: 0.5;"></div> ') 
    }, 
    function(){ 
     $(this).stop(); 
     $(this).find('.edit_overlay').remove(); 
     $('#edit_hover').fadeOut(300); 
    });

答

live()只需要一个处理程序，所以你不能使用hover（1.4.1之前）。无论如何，它只是mouseenter和mouseleave的快捷方式。使用这些事件绑定到：

$('.edit_hover') 
.live('mouseenter',function(){}) 
.live('mouseleave',function(){});

或者因为jQuery的1.4.1：

$('.edit_hover').live('hover', function(event) { 
    if (event.type == 'mouseenter') { 
    // first function here 
    } else { 
    // second function here 
    } 
});

+1谢谢！注意：我必须将'mouseover'更改为'mouseenter'，才能使脚本的第二部分工作。 – ILoveBrisbane 2011-03-24 11:53:03

@ILoveBrisbane：对。 'hover'绑定'mouseenter'和'mouseleave'，而不是'mouseover'。感谢您指出这一点....修正:) – 2011-03-24 13:36:23

仍然似乎在1.6.2的情况 – mplungjan 2011-09-01 13:50:45

答

只是猜测：不使用hover使用mouseover和mouseout：

$("...").live("mouseover", function() { 
    // .... 
}).live("mouseout", function() { 
    // ... 
});

'mouseover'和'mouseout'不工作方式相同'mouseenter'和'mouseleave'（事件，“悬停”是基于）。 – 2010-04-14 15:13:10

答

jQuery的是什么版本的？您需要使用jQuery 1.4.1以现场方式使用hover。它在早期版本中不受支持。请参阅live documentation的注意事项部分。但是，请注意，您只有一个回调，需要区分回调内部的事件以独立处理悬停/出局。

$('.hoverme').live('hover', function(event) { 
    if (event.type == 'mouseover') { 
    // do something on mouseover 
    } else { 
    // do something on mouseout 
    } 
});

不能让jquery悬停使用.live（）

相关推荐