live() 鼠标输入/悬停

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()< /code>版本：

$("#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();
});