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-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()的第二个参数是以毫秒为单位的延迟。

jQuery和CSS菜单帮助！

1 个答案: