jQuery fadeIn / fadeOut在无序列表中

Question

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

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

我可以做些什么来将两张图片放在同一个<li>之内？还是另一种（更好的）方式来实现这一目标？任何帮助表示赞赏。

DEMO

Answer 1

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

#menu1 {
    position: relative;
}

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

这样你就可以将你的悬停图像放在相对于其父图像的绝对位置，所以当显示时，它会显示在另一个上面。

这是jsFiddle，希望它有所帮助。