现场（）的mouseenter /悬停

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

但后来，我被告知，现场（）犯规处理两种功能。

我最上面的问题的代码是，它没有显示与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(); 
});