Javascript jQuery和CSS菜单帮助！

我试图制作一个粘在屏幕底部的菜单栏。由于它在屏幕上的位置，我不能使用锚定标签进行超链接，因为在Google Chrome中，它会导致小链接栏出现在下角（覆盖在菜单顶部）

因此，每个菜单图标都是一个具有唯一ID（例如“profile”）的DIV，并应用“menu item”类。单击时，这些图标中的每一个都将链接到特定页面（例如，为什么我要使用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效果应用于工具提示/子菜单的外观

如有评论、建议、代码和JSFIDLE示例，将不胜感激。如果我对任何方面都不清楚，我很乐意进一步澄清

---

提前感谢。

您需要将菜单项和提示链接包装在父级

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

div

上

更新：

要回答后续问题，您需要使用

setTimeout（）

：

---

setTimeout（）

的第二个参数是以毫秒为单位的延迟。

这是一个多么简单的解决方案，感谢大家的支持！虽然我有你的注意，什么是最好的解决方案，让工具提示有一个持久的悬停。我的意思是，如果我将鼠标悬停在工具提示上，我希望它在消失前保持可见大约1秒的宽限期。这显然是某种类型的jQuery构造/函数。为您的持续帮助干杯：）此外，只有当图标悬停超过1秒时，工具提示才能弹出。这将防止在用户滚动图标时弹出工具提示。这将真的结束它，干杯@dgilland希望你能提供进一步的帮助！

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);