jQuery 和 CSS 菜单帮助！

Question

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

因此，每个菜单图标都是一个具有唯一 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 淡入和淡出效果应用于工具提示/子菜单的外观。

我们将不胜感激评论、建议、代码和 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-wrapper div 上。

更新：

要回答您的后续问题，您需要使用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() 的第二个参数是以毫秒为单位的延迟。