Исправлено позиционирование элемента списка при наведении мыши - jQuery

Question

Я хочу показать область переполнения в элементе списка при наведении курсора на *.

Обычно высота элемента установлена ​​на 200 пикселей и имеет область переполнения (не отображается).

$('#extra_product ul li').live('mouseenter',function(){
    var t = $(this);
    var sHeight = t.height();
    t.css({"height":"auto","z-index":"999"});
    var eHeight = t.height();
    t.height( sHeight ).animate({ height: eHeight });
});

Это работает, но другие элементы влияют и движутся к следующему и вниз. Я не хочу влиять на другие элементы, просто анимируйте на фактическую высоту и оставайтесь над элементом ниже.

URL рабочей демоверсии: http://jsfiddle.net/D9P7V/

Answer 1

это то, как я это сделал, это не идеально, но вам, возможно, понадобятся некоторые CSS-трюки, конечно, уловка, которую я использовал:

в javascript, клонирование элемента, который будет показан, и добавление его в телотаким образом, он больше не может влиять на другую разметку, затем поместите его поверх элемента и покажите его (анимируйте все, что вам нравится)

пример, начатый из вашего кода: http://jsfiddle.net/D9P7V/4/

edit добавлено решение без клонирования

другое решение, если вы хотите оставить разметку внутри, а не клонировать, это установить элемент LI на position: относительный и поместить div с дополнительнымо содержании, абсолютном к этому LI.

пример можно найти здесь: http://jsfiddle.net/D9P7V/5/

конец редактировать

Answer 2

вы должны использовать абсолютную позицию (внутри относительного деления), и тогда ваш нижний делитель не будет затронут