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

【问题标题】：Mouse Over function not working for first time after page Load页面加载后鼠标悬停功能第一次不起作用
【发布时间】：2012-02-23 17:33:06
【问题描述】：

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

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

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

我认为悬停内的悬停功能可能是使涂鸦的功能:(

谁能指出我做错了什么？

这是我的fiddle demo

【问题讨论】：

您应该将鼠标悬停在什么上以显示工具提示。根据您的代码，工具提示显示正确。您的所有锚标签上都有插件，它们会在悬停或点击时显示工具提示
@DG3-它们运行良好。但是在页面加载时，如果您直接将鼠标悬停在锚标记上，它们第一次不会显示，如果您单击页面上的任何位置，它们显示的第二次不会显示起来。

标签： jquery mouseover tooltip

【解决方案1】：

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

老实说，我不太了解您正在做的 .live() 的全部内容： - 为什么要对存在并保留的元素（内容）使用事件委托？ - 为什么只在 mouseover 和 mouseleave 下绑定事件（单击或悬停）。简直没有意义……

这就是我的简单做法。完全去掉 .live() 调用，根据settings.showButtons直接绑定hover或click事件：

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，因为您的按钮是不可见的，所以我看不到它。

【讨论】：

@Didier-抱歉回复晚了-感谢您的宝贵时间，它运作良好！ :)

【解决方案2】：

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

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

【讨论】：