live() mouseenter/hover

$('.WallEntry').live开发者_如何学Python('mouseover mouseout', function(event) {
if (event.type == 'mouseover') {
$(this).find('.delButton').css('visibility', 'visible');
}else{
$(this).find('.delButton').css('visibility', 'hidden');
}
}); 

CSS:

.WallEntry{
width: 300px;
}

HTML

<div class='WallEntry'>
Message: <br>
Hi, have you been there..?
<div style='visibility: hidden' class='delButton'></div>
</div>

What I would like to do:

When you hover the message(the element WallEntry), the delButton should appear. When you mouseaway away, it should hide.

I have tried:

$(".WallEntry").live("hover", function(){
$(this).find('.delButton').css('visibility', 'visible');
}, function() {
$(this).find('.delButton').css('visibility', 'hidden');
});

But then I got told that live() doesnt handle two functions.

My code at top´s issue is that it doesn't show the delButton on the appended div elements with WallEntry.

How should this be done?

I suggest, if you don't need to support IE6, removing all of your script for the hover, and just doing this in CSS:

.WallEntry .delButton { visibility: hidden; }
.WallEntry:hover .delButton { visibility: visible; }

If you have to support IE6, use this CSS:

.WallEntry .delButton { visibility: hidden; }
.WallEntry.hover .delButton, .WallEntry:hover .delButton { visibility: visible; }

And this script:

$(".WallEntry").live("hover", function() {
   $(this).toggleClass('hover');
});

Or, to be completely safe:

$(".WallEntry").live("mouseenter", function() {
   $(this).addClass('hover');
}).live("mouseleave", function() {
   $(this).removeClass('hover');
});

And if the parent container has an ID, the .delegate() version:

$("#parentID").delegate(".WallEntry", "mouseenter", function() {
   $(this).addClass('hover');
}).delegate(".WallEntry", "mouseleave", function() {
   $(this).removeClass('hover');
});

May not be your problem, but couldn't you just do:

$('.WallEntry').mouseover(function() {

    $('.delButton').show();
}

$('.WallEntry').click(function() {

    $('.delButton').hide();

}

what's wrong with this?

$('.WallEntry').live('mouseover', function(event) {
  $(this).find('.delButton').css('visibility', 'visible');
}); 

$('.WallEntry').live('mouseout', function(event) {
  $(this).find('.delButton').css('visibility', 'hidden');
}); 

I would suggest this if you were using display:none; instead of visibility:hidden;

$('.WallEntry').live('mouseover', function(event) {
  $(this).find('.delButton').show();
}); 

$('.WallEntry').live('mouseout', function(event) {
  $(this).find('.delButton').hide();
});