javascript - jQuery 和 CSS 菜单帮助!

Question

我正在尝试制作一个固定在屏幕底部的菜单栏。由于它在屏幕上的位置，我无法使用 anchor 标记进行超链接，因为在 Google Chrome 中，它会导致小链接栏出现在底 Angular (覆盖在菜单顶部)。

因此，每个菜单图标都是一个具有唯一 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() 的第二个参数是以毫秒为单位的延迟。