Question

我有这个功能，我需要在鼠标悬停时显示工具提示：

  content.live({
            mouseover: function () {
                if (settings.showButtons == false) {
                    content.hover(function () {
                        $('#' + settings.toolTipId).remove();
                        content.attr({ title: '' });
                        buildTipify();
                        positionTipify();
                    }, function () {
                        removeTipify();
                    });
                }
            },

但是当第一次加载页面时它不会弹出，如果我点击页面上的任何地方，如果我鼠标悬停在我的链接上，那么poup就会显示出来。

我认为悬停内部的悬停功能可能是造成涂鸦的原因:(

任何人都可以指出我做错了什么吗？

这是我的fiddle demo

Answer 1

问题是你只能在content的鼠标悬停事件中绑定悬停事件（技术上是mouseenter + mouseleave）。所以第一次，没有悬停事件绑定，第二次，有你的工具提示显示。

谦虚地说，我真的不了解.live（）你做的所有事情： - 为什么要对存在且仍然存在的元素（内容）使用事件委托？ - 为什么你只在鼠标悬停和鼠标移动下绑定你的事件（点击或悬停）。这没有任何意义......

以下是我将如何做到这一点。完全删除.live（）调用并根据settings.showButtons直接绑定悬停或点击事件：

if (settings.showButtons == false) {
    content.hover(function() {
        $('#' + settings.toolTipId).remove();
        content.attr({
            title: ''
        });
        buildTipify();
        positionTipify();
    }, function() {
        removeTipify();
    });
} else {
    content.click(function(el) {
        // remove already existing tooltip
        $('#' + settings.toolTipId).remove();
        content.attr({
            title: ''
        });
        buildTipify();
        positionTipify();
        // Click to close tooltip
        $('#' + settings.closeTipBtn).click(function() {
            removeTipify();
            return false;
        });
        return false;
    });
}

<强> DEMO

注意：我已经改变了关闭按钮的CSS，因为你的按钮是不可见的，所以我看不到它。

Answer 2

你的猜测是正确的。问题是您在hover闭包内添加了mouseover。更糟糕的是，每次hover时，您都会添加新的mouseover操作。如果您只想在settings.showButtons == false时添加悬停，那么您应该将其移到live之外。

此外，您的mouseleave功能似乎也会遇到同样的问题。

鼠标悬停功能在页面加载后第一次不起作用

2 个答案: