jQuery fadeIn / fadeOut在无序列表中

I am trying to use jQuery's fadeIn/fadeOut effects on images that are being used as buttons in an unordered list. I want to be able to have the hovered image fade in quickly and out slowly on mouseout. The problem I am having is that I am trying to do this as horizontal menu with floated <li> tags. I created a jsfiddle with as simple of an example as I could. The list in the example contains only 1 list item, but it will actually have 4 or 5.

我试图在无序列表中用作按钮的图像上使用jQuery的fadeIn / fadeOut效果。我希望能够让鼠标悬停的图像快速淡入淡出。我遇到的问题是我尝试将此作为带有浮动

标签的水平菜单。我尽可能简单地创建了一个jsfiddle。示例中的列表仅包含1个列表项,但实际上它将包含4个或5个。

In order to position the hover images I have created a second <ul> so that it is positioned on top of the other list. What is happening now is that when hovered it does the fadeIn fadeOut twice. I assume that this is happening once for each of the <ul>.

为了定位悬停图像,我创建了第二个

Is there something I can do to position two images on top of each other, within the same <li>? Or another(better) way altogether to accomplish this? Any help is appreciated.

我可以做些什么来将两个图像放在彼此之上,在同一个

中?还是另一种(更好的)方式来实现这一目标?任何帮助表示赞赏。

DEMO

1 个解决方案

#1

You can get rid of the second <ul> by putting the two images within your #menu1, and then adding this few properties to your CSS:

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

#menu1 {
    position: relative;
}

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

That way you're positioning your hover image in an absolute position relative to its parent, so when shown, it will appear on top of the other one.

这样您就可以将悬停图像定位在相对于其父图像的绝对位置,因此在显示时,它将显示在另一个图像的顶部。

Here's the jsFiddle, hope it helps.

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

#1