淡入淡出內嵌div而不改變位置？

Question

這個問題可能有點混亂。

我有一個內聯div，第一個是關閉/刪除按鈕。我試圖淡入在懸停的關閉按鈕上，但是當它淡出其餘的div向左移動時。

你會如何防止這種情況？

這裏是一個小提琴：關於頂部http://jsfiddle.net/x2SEv/

哈弗「一些文本放在這裏」

Answer 1

jQuery函數.show()和.hide()，使用的CSS屬性display。

當屬性顯示設置爲無時，被隱藏的HTML元素填充的空間將被刪除。所以你的第二個div移動到左邊。您必須使用CSS屬性visibility。它的作用與display一樣，但它保留了由HTML填充的空間。

讓我們試試：

在您的JS：

$(".todo").mouseover(function() { 
     $('.closebtn').css("visibility", "visible"); 
    }); 
    $(".todo").mouseout(function() { 
     $('.closebtn').css("visibility", "hidden"); 
    }); 

而且你的CSS：

.closebtn, .actions{visibility:hidden;} 

Answer 2

你必須是你的衰落元素絕對定位，移動你的文字中一點：http://jsfiddle.net/x2SEv/1/。

.parent { 
    position: relative; 
    padding-left: 40px; 
} 
.div-to-fade { 
    display:none; 
    position: absolute; 
    left:0; top:0; 
}