Question

$('.WallEntry').live('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?

Answer 1

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