鼠標懸停功能沒有頁面加載後工作第一次

我有這個功能，我需要顯示工具提示，當鼠標懸停：鼠標懸停功能沒有頁面加載後工作第一次

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

鼠標懸停功能沒有頁面加載後工作第一次

回答

相關問題