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 ，希望對您有所幫助。