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