mouseover mouseout 在多个 ul 上不起作用动画

Question

有人知道如何使我的脚本适用于多个 ul 吗？

请看my jsfiddle。
如您所见，该脚本仅适用于鼠标悬停时的第二个 ul。

谢谢你！
致以诚挚的问候，
乔纳森

Answer 1

所以让我解释一下，发生了什么。你只选择了最后一个创建的 div，所以只有那个。

我必须找到选中的.active 和选中的div

示例如下：

http://jsfiddle.net/JoshuaPack/YFUsJ/23/

在mouseover 中，我将此添加到顶部以更改active 和animation 变量

    active = $(this).parent().find('.active');
    animation = $(this).parent().find('div');

在mouseout 我添加了这个。

    active = $(this).find('.active');
    animation = $(this).find('div');

编辑： 对于将active 类移动到其他<li> 对象的问题，您必须分别为每个.active 类附加<div> 这是一个例子：

http://jsfiddle.net/JoshuaPack/YFUsJ/31/

我所做的是将动画变量包装成.each

$.each(active, function() {
    var animation = $('<div>').css({
        'position': 'absolute',
        'height': $(this).outerHeight()-1,
        'width': $(this).outerWidth(),
        'marginTop': ($(this).parent().index() * $(this).outerHeight()),
        'borderBottom': '1px solid #000',
        'z-index': -10
    });
    $(this).parent().parent().prepend(animation);
});

相反，或者像以前一样添加到 <ul> 之前，我对父级的父级进行了操作，该父级应该始终存在于带有 active 类的菜单中。