在不更改 position 的情况下淡入和淡出内联 div？

Question

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

我有一个内联 div，第一个是关闭/删除按钮。 我正在尝试淡入 hover 上的关闭按钮，尽管当它淡出时 rest div 向左移动。

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

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

Hover 位于“这里有一些文字”

Answer 1

您必须绝对 position 您正在褪色的元素，并稍微移动您的文本： 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( .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;}