jQuery-live()鼠标进入/悬停

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

应该怎么做？

最佳答案

我建议,如果您不需要支持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');
});