jQuery和CSS菜单帮助！_JavaScript

我正在尝试制作一个粘贴在屏幕底部的菜单栏。 由于它在屏幕上的位置，我无法使用锚标签进行超链接，因为在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示例将不胜感激。 如果我在任何方面都不清楚，很高兴进一步澄清。

提前致谢。

您需要将菜单项和提示链接包装在父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楼