在不改变位置的情况下淡入和淡出内联div？

Question

这个问题可能有点令人困惑。

我有一个内联 div，第一个是关闭/删除按钮。我正在尝试在悬停时淡入关闭按钮，尽管当它淡出时，其余 div 会向左移动。

您将如何防止这种情况发生？

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

将鼠标悬停在 “这里有一些文字”

Answer 1

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

当属性 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;}

Answer 2

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

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