Live () mouseenter / hover

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 over a message (WallEntry element), delButton should appear. When you leave, he must hide.

I tried:

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

But then I was told that live () does not handle two functions.

My code at the top is that it does not show delButton over added div elements using WallEntry.

How to do it?

Answer 1

I suggest if you don't need to support IE6 by removing all of your scripts to hang and just doing it in CSS:

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

---

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

, .delegate() :

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

Answer 2

, :

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

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

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

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

}

Answer 3

?

$('.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 used display:none;insteadvisibility:hidden;

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

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