現場（）的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(); 
});