2012-03-17 71 views
0

我正在做一個網站使用asp.net C#,我想彈出一個小窗口的信息,只要鼠標懸停一個特定的單詞。我知道我必須使用jQuery,但我不知道如何去做。彈出鼠標懸停單詞

有什麼建議嗎?

回答

4

有很多插件可以幫助你實現你正在尋找的東西。但是也可以自己實現這個功能。如果您遇到的某些插件也使用類似的代碼,我也不會感到驚訝。

以下是我嘗試揭開工具提示/彈出式插件行爲的祕密。

您可以將所需的單詞包裝在<span>元素中,並給它一個.hover類。

<div> 
    This is some text with a <span class="hover">special</span> 
    word that has hovercraft capabilities. 
</div> 

你的jQuery(ver 1.7+)將是這個樣子:

$(".hover").on('mouseenter',function(){ 
    // The popup must be shown here (mouse is over element). 
}).on('mouseleave',function(){ 
    // The popup must be hidden here (mouse has left element). 
}); 

我要補充在這裏,我使用jQuery的偉大,但有時會忘記能力被稱爲「鏈接」。 on()函數實際上返回它所連接的對象。在這種情況下,$(".hover") - 所以如果我想調用該對象的另一個函數,我可以在最後添加它作爲另一個函數。另外一個例子是:

$("#myElement").text("An error has occured!").css("color","#FF0000");

這行代碼也將在文本#myElement也變成紅色。



關於您的實際彈出 - 我建議兩兩件事:

  1. 有在您的標記底部的元素(最後寫了這麼指數最高的 - 或者手動設置最高的z-index )
  2. 您也可以在應該觸發彈出窗口的元素旁邊的隱藏元素中顯示彈出窗口。
+0

與跨度和.hover它似乎沒有它工作。 – 2012-03-17 13:39:33

+0

我的代碼,因爲它在這裏不會給你的功能 - 你必須插入你想要使用的彈出式HTML,然後切換這些元素在這些'mouseenter/mouseleave'回調中的可見性...... – Lix 2012-03-17 13:41:44

+1

是你嗎包括一個jQuery庫? – Robert 2012-03-17 13:42:08