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>

我想做什么：

当您将消息悬停（元素WallEntry）时，应显示delButton。当你离开时，它应该隐藏。

我试过了：

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

但后来我被告知live（）不会处理两个函数。

我在顶部问题的代码是它没有在附加的带有WallEntry的div元素上显示delButton。

应该怎么做？

Answer 1

我建议，如果您不需要支持IE6，请删除所有用于悬停的脚本，并在CSS中执行此操作：

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

---

如果 支持IE6，请使用此CSS：

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

这个脚本：

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

或者，为了完全安全：

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

如果父容器有ID，则.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');
}); 

---

如果您使用的是display:none;而不是visibility:hidden;

，我建议您这样做

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

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