jQuery无序列表中的fadeIn / fadeOut

Question

我正在尝试在被用作无序列表中的按钮的图像上使用jQuery的fadeIn / fadeOut效果。 我希望能够将鼠标悬停时悬停的图像快速淡入和淡出。 我遇到的问题是，我尝试使用浮动的<li>标签作为水平菜单来执行此操作。 我用尽可能简单的示例创建了一个jsfiddle。 示例中的列表仅包含1个列表项，但实际上将具有4或5。

为了放置悬停图像，我创建了第二个<ul> ，使其位于另一个列表的顶部。 现在发生的是，悬停时它会执行两次fadeIn fadeOut。 我假设对于每个<ul>都只会发生一次。

我可以做些什么来将两个图像放在同一<li>内彼此<li>吗？ 还是完全采用另一种（更好）的方式来做到这一点？ 任何帮助表示赞赏。

DEMO

Answer 1

您可以通过将两个图像放入#menu1 ，然后将这几个属性添加到CSS中来摆脱第二个<ul> ：

#menu1 {
    position: relative;
}

#hovbutton1 {
    position: absolute;
    top: 0;
}

这样，您可以将悬停图像相对于其父对象放置在绝对位置，因此，在显示时，它会出现在另一个图像的顶部。

这是jsFiddle ，希望对您有所帮助。