淡入淡出内联div而不改变位置？

Question

问题可能有点令人困惑。

我有一个内联div，第一个是关闭/删除按钮。我正试图在悬停时淡出关闭按钮，尽管它已经淡出了剩下的div向左移动。

你会如何阻止这种情况？

这是一个小提琴：http://jsfiddle.net/x2SEv/

将鼠标悬停在之上'有些文字在这里'

Answer 1

你必须绝对定位你正在褪色的元素，并稍微移动你的文字：http://jsfiddle.net/x2SEv/1/。

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

Answer 2

jQuery函数.show()和.hide()，使用CSS属性display。

当属性显示设置为none时，将删除由隐藏的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;}