之前使用jQuery的淡入在mouseover.how讓隱藏的元素佔用空間？

Question

如何讓元素在隱藏時佔用空間，然後使用jquery mouseover使其顯示。

這裏是一個例子。

http://jsfiddle.net/Nj97k/

當我這樣做visiliblity隱藏，圖標不再消失在鼠標懸停。

Answer 1

最初做出的不透明度0

<a id='posttext'class='flagpost' style='color:grey;' href='javascript:void(0)'> 
    <i style="opacity: 0 " class='icon-flag'>This is an icon</i>Flag 
</a>​ 

然後做正常變淡：

$('.flagpost').mouseover(function() { 
    $('.icon-flag').fadeTo(500, 1); 

}); 
$('.flagpost').mouseleave(function() { 
    $('.icon-flag').fadeTo(300, 0); 
});​ 

Demo here

Answer 2

您可以您的元素替換display:none與opacity:0，或者你可以觸發mouseleave事件您的jQuery立即爲您做到這一點：

.icon-flag { 
    opacity: 0; 
} 

或者

$('.flagpost') 
    .mouseover(function(){ 
     $('.icon-flag').fadeTo(500,1); 
    }).mouseleave(function(){ 
     $('.icon-flag').fadeTo(300,0); 
    }).trigger("mouseleave");​​​​​