jQuery和CSS菜單幫助！

Question

我在嘗試製作一個粘貼到屏幕底部的菜單欄。由於它在屏幕上的位置，我不能使用錨鏈接標籤進行超鏈接，因爲在谷歌瀏覽器中，它會導致該小鏈接欄出現在底角（覆蓋菜單頂部）。因此，每個菜單圖標是具有唯一ID（例如「簡檔」）的DIV，並且類「菜單項」被應用於其。點擊這些圖標時，每個圖標都會鏈接到特定頁面（例如，爲什麼我想使用onClick javascript事件）。但是，當這些圖標中的每一個都懸停在上面時，會在其上方彈出一個上下文工具提示（或子菜單）。在這個工具提示裏面有更多的選項或鏈接。因此，我想出了下面的HTML結構：

example image located here: http://i.stack.imgur.com/hZU2g.png 

每個菜單圖標都會有自己獨特的onClick的鏈接，以及其獨特的子菜單/工具提示（可能有更多的鏈接到不同的頁面）。

我使用jQuery的如下彈出每個子菜單：

$(".menu-item").hover(function() { 
    $('#' + this.id + '-tip').fadeIn("fast").show(); //add 'show()'' for IE 
}, 
function() { //hide tooltip when the mouse moves off of the element 
    $('#' + this.id + '-tip').hide(); 
} 
); 

我在飼養的提示時可見光標離開圖標，到子菜單/工具提示（目前的問題消失的第二個圖標不再徘徊）。我想要將jQuery fadein和fadeout效果應用於工具提示/子菜單的外觀。

評論，建議，代碼和jsfiddle的例子將不勝感激。如果我在任何方面都不清楚，我很樂意進一步澄清。

在此先感謝。

Answer 1

你需要用的菜單項和小費鏈接在父div像這樣：

<div class="item-wrapper" rel="profile"> 
    <div id="profile" class="menu-item"></div> 
    <div id="profile-tip" class="tip"> 
     <a href="link1.php">Link1</a> 
     <a href="link2.php">Link2</a> 
    </div> 
</div> 

然後申請懸停功能.item-wrapper和引用rel屬性（或者你選擇的任何其他屬性） ：

$(".item-wrapper").hover(function() { 
    $('#' + $(this).attr("rel") + '-tip').fadeIn("fast").show(); //add 'show()'' for IE 
}, 
function() { //hide tooltip when the mouse moves off of the element 
    $('#' + $(this).attr("rel") + '-tip').hide(); 
}); 

這樣，當你將鼠標懸停在鏈接，您仍然會徘徊在.item-wrapperdiv。

UPDATE：

要回答你的後續問題，你將需要使用setTimeout()：

var item_wrapper = { 
    onHover: function($obj, delay) { 
     setTimeout(function() { 
      $('#' + $obj.attr("rel") + '-tip').fadeIn("fast").show(); //add 'show()'' for IE 
     }, delay); 
    }, 
    offHover: function($obj, delay) { 
     setTimeout(function() { 
      $('#' + $obj.attr("rel") + '-tip').hide(); 
     }, delay); 
    }, 
    initHover: function($obj, delay) { 
     $obj.hover(function() { 
      item_wrapper.onHover($(this), delay); 
     }, function() { 
      item_wrapper.offHover($(this), delay); 
     }); 
    } 
}; 

item_wrapper.initHover($(".item-wrapper"), 1000); 

的第二個參數setTimeout()是以毫秒爲單位的延遲。