鼠标悬停功能没有页面加载后工作第一次

我有这个功能，我需要显示工具提示，当鼠标悬停：鼠标悬停功能没有页面加载后工作第一次

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

但是当页面加载的第一次多申” t弹出，如果我点击页面上的任何地方，并且如果我将鼠标悬停在我的链接上，那么该图表就会显示出来。

我觉得里面悬停悬停功能可能是一个，这使得涂鸦:(

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

这里是我的fiddle demo

来源

2012-02-23 coder

你应该徘徊什么来显示工具提示。根据你的代码，工具提示显示正确。您的所有锚定标签上都有插件，并且它们显示悬停时的工具提示或点击 – DG3 2012-02-23 17:46:26

@ DG3-它们运行良好。但是在页面加载时如果您直接将鼠标悬停在锚标记上，它们不会首次显示并从第二次，如果你点击他们出现在网页上的任何地方。 – coder 2012-02-23 17:48:04

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

我真的不明白整个事情与.live（）你在做什么： - 为什么你会使用一个元素（内容）的事件委托存在并保持？ - 你为什么只在mouseover和mouseleave下绑定你的事件（点击或悬停）。这只是没有意义...

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

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

来源

2012-02-23 17:47:30

@迪迪埃 - 对于迟到的回复抱歉 - 感谢您的时间，它运作良好！ :) – coder 2012-02-23 20:49:02

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

此外，它看起来像你将与你的mouseleave函数也有同样的问题。

来源

2012-02-23 17:47:49

鼠标悬停功能没有页面加载后工作第一次

回答

相关问题