mouseover mouseout不能在多个ul上运行动画

Question

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

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

先谢谢你！
亲切的问候，
乔纳森

Answer 1

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

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

以下是示例：

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

在mouseover我将此页面添加到顶部以更改active和animation vars

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

在mouseout我添加了这个。

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

修改 对于将班级active移至其他<li>个对象的问题，您必须分别为每个<div>班级附加.active 这是一个例子：

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的菜单。