Появление и исчезновение встроенных 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;
}