Q
彈出鼠標懸停單詞
0
A
回答
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
也變成紅色。
關於您的實際彈出 - 我建議兩兩件事:
- 有在您的標記底部的元素(最後寫了這麼指數最高的 - 或者手動設置最高的z-index )
- 您也可以在應該觸發彈出窗口的元素旁邊的隱藏元素中顯示彈出窗口。
2
你以後聽起來像是一個'工具提示'。
使用jQuery的解決方案有些涉及 - 所以我只是引導你到外部資源。
可能的解決方案:
相關問題
- 1. 鼠標懸停彈出
- 2. 彈出標籤時鼠標懸停
- 3. 鼠標懸停彈出消息
- 4. 鼠標懸停在vb.net彈出圖表
- 5. 鼠標懸停彈出屏幕截圖
- 6. 彈出鼠標懸停圖像
- 7. 製作文本彈出鼠標懸停
- 8. CSS/Javascript鼠標懸停彈出框
- 9. 彈出DIV當鼠標懸停在單選按鈕
- 10. 單張鼠標懸停通過數組列表彈出
- 11. 內聯菜單出現鼠標懸停
- 12. Fadein鼠標懸停和淡出鼠標
- 13. jQuery懸停鼠標懸停/鼠標退出計時
- 14. 超時鼠標懸停和鼠標懸停下拉菜單?
- 15. 突出鼠標懸停表
- 16. 激活定時鼠標懸停後的彈出式菜單,然後在鼠標懸停後取消激活
- 17. PrototypeJS鼠標懸停菜單
- 18. 鼠標懸停子菜單
- 19. 鼠標懸停
- 20. 鼠標懸停
- 21. 鼠標懸停
- 22. 鼠標懸停
- 23. 問題與鼠標懸停,鼠標移出在JQuery的菜單
- 24. 懸停彈出,與菜單
- 25. 懸停彈出懸停
- 26. Openlayers 3彈出鼠標懸停在標記上
- 27. jQuery - 懸停彈出直到鼠標移出
- 28. 暫停jQuery懸停(鼠標懸停)
- 29. 反應傳單彈出不工作,鼠標懸停時光標不會改變
- 30. Kinetic.Line鼠標懸停
與跨度和.hover它似乎沒有它工作。 – 2012-03-17 13:39:33
我的代碼,因爲它在這裏不會給你的功能 - 你必須插入你想要使用的彈出式HTML,然後切換這些元素在這些'mouseenter/mouseleave'回調中的可見性...... – Lix 2012-03-17 13:41:44
是你嗎包括一個jQuery庫? – Robert 2012-03-17 13:42:08