淡入淡出内嵌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; 
}