2011-04-01 80 views
0

當鼠標懸停在每個Stack Overflow標籤上時,它自身下方會顯示一個信息框。只要鼠標懸停在標籤上或通過信息框,它就會繼續顯示。將鼠標移出標記或信息框會導致信息框消失。Stack Overflow標記 - 它們如何在鼠標上顯示信息?

如何使用JQuery或JS實現此目的?請解釋從服務器檢索標籤信息的過程。

更新:

重要的事情是很難相信,這是一個提示。因爲當標籤從表面丟失鼠標指針時,工具提示通常會消失。但是至於堆棧溢出工具提示,即使鼠標移過信息區域,它們仍然保持不變。這就是爲什麼我提出這個問題來澄清這個問題。這種類型的定製如何完成?

回答

0

我會推薦Tooltip這樣的東西。

1

沒有更具體的我可以給你的是它是如何工作的一般想法。

鼠標懸停將觸發一個AJAX請求(可能在短暫的計時器倒數後,爲了保持它發射,直到指針已經在標籤上一段時間),它向SO數據庫查詢有關標籤。如果返回某種響應,可以是直接注入到DOM中的HTML片段,也可以是用於填充注入到DOM中的元素的XML或JSON編碼數據塊。 mouseout事件將從DOM中移除元素。我可以想象,AJAX響應也由JavaScript管理,並保存在內存緩存中,以便不重複請求相同的數據。

0

添加事件偵聽到鼠標懸停DOM事件來顯示信息框。向mouseout事件添加事件偵聽器以隱藏信息框。詳情請參閱Mouse event types。通過XMLHttpRequest檢索您要在信息框中顯示的信息。

相關問題