cant get jquery hover to work with .live()

Question

the second function isnt working?

$('.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);
    }); 

Answer 1

Just guessing: don't use hover use mouseover and mouseout:

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

Answer 2

What version of jQuery? You need to be using jQuery 1.4.1 to use hover with live. It wasn't supported in earlier versions. See the Caveats section of the live documentation. Note, however, that you only have a single callback and need to differentiate the event inside the callback to handle hover/out independently.

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

Answer 3

live() only takes one handler, so you cannot use hover (before 1.4.1). Anyway, it is just a shortcut for mouseenter and mouseleave. Use these events to bind to:

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

Or since jQuery 1.4.1:

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