滑鼠懸浮於連結<a>之上出現提示文字效果程式碼
連結<a>元素具有自帶的滑鼠懸浮連結提示效果,不過大家都知道,自帶的東西往往不能夠滿足我們的需求。
下面就分享一段程式碼例項,它實現了滑鼠懸浮出現自定義的連結提示效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> ul{ margin:0; padding:0; } ul li{ list-style:none; } .div{ width:200px; float:left; display:inline; } .div ul li{ width:220px; padding:0px 6px; line-height:25px; height:25px; margin-top:1px; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascript"> $(function(){ $(".div ul li").hover(function(e){ var x=e.pageX; var y=e.pageY; var div=$("<div id='div_show'></div>"); var text=$(this).html(); $(this).append(div); $("#div_show").html(text).css({ "height":"25px", "position":"absolute", "zIndex":"99", "backgroundColor":"#38F758", "whiteSpace":"nowrap", "paddingLeft":"15px", "paddingRight":"15px", "top":y+10+"px", "left":x+10+"px" }); $("this").children("#div_show").show(); },function(){ $(this).children("#div_show").remove(); }) }) </script> </head> <body> <div class="div"> <ul> <li>螞蟻部落歡迎您,只有努力奮鬥才會有美好的未來。</li> <li>本站的地址是softwhy.com。</li> <li>沒有任何人一開始就是高手,必須要努力奮鬥。</li> </ul> </div> </body> </html>
一.程式碼註釋:
(1).$(function(){}),當文件內容完全載入完畢再去執行函式中的程式碼。
(2).$(".div ul li").hover(),為li元素註冊hover()事件處理函式。
(3).var x=e.pageX,獲取滑鼠懸浮位置指標距離文件左邊緣的距離。
(4).var y=e.pageY,獲取滑鼠懸浮位置指標距離文件上邊緣的距離。
(5).var div=$("<div id='div_show'></div>"),建立一個div元素。
(6).var text=$(this).html(),獲取當前懸浮的元素的html內容,並賦值給變數text。
(7).$(this).append(div),將建立的div元素追加到當前懸浮元素的後面。
(8).$("#div_show").html(text).css({
"height":"25px",
"position":"absolute",
"zIndex":"99",
"backgroundColor":"#38F758",
"whiteSpace":"nowrap",
"paddingLeft":"15px",
"paddingRight":"15px",
"top":y+10+"px",
"left":x+10+"px"
}),將當前滑鼠懸浮元素的內容新增到新建立的div元素中,然後設定div元素的相關樣式。
(9).$("this").children("#div_show").show(),顯示div元素。
(10).function(){
$(this).children("#div_show").remove();
}),滑鼠離開後就刪除div元素。
二.相關閱讀:
(1).pageX屬性可以參閱jQuery event.pageX一章節。
(2).html()可以參閱jQuery html()一章節。
(3).append()方法可以參閱jQuery append()一章節。
(4).children()方法可以參閱jQuery children()一章節。
(5).remove()方法可以參閱jQuery remove()一章節。
相關文章
- 滑鼠懸浮連結彈出提示程式碼例項
- 自定義滑鼠懸浮連結彈出提示程式碼例項
- 滑鼠懸浮連結出現音效效果程式碼例項
- CSS滑鼠懸浮在連結之上背景變色程式碼CSS
- css 滑鼠懸浮連結背景變色程式碼CSS
- jQuery實現的滑鼠在連結懸浮背景變色程式碼jQuery
- 滑鼠懸浮改變連結樣式程式碼例項
- 滑鼠懸浮實現連結背景變色效果
- 滑鼠懸浮彈出滑鼠跟隨層程式碼例項
- 滑鼠懸浮實現翻牌效果程式碼例項
- CSS3連結<a>滑鼠懸浮動畫效果CSSS3動畫
- jQuery 滑鼠懸浮連結彈出跟隨圖片詳解jQuery
- CSS滑鼠懸浮在超連結上彈出提示框CSS
- 滑鼠懸浮實現抖動效果例項程式碼
- 滑鼠懸浮表格行變色程式碼
- 滑鼠懸浮文字實現霓虹燈效果程式碼例項
- CSS實現的滑鼠懸浮整行背景變色程式碼CSS
- js滑鼠懸浮連結背景動畫方式漸變效果JS動畫
- 滑鼠懸浮評分效果程式碼例項
- css滑鼠懸浮tips效果程式碼例項CSS
- javascript滑鼠懸浮行變色程式碼例項JavaScript
- 滑鼠懸浮div實現旋轉縮放效果程式碼例項
- css3程式碼實現的滑鼠懸浮按鈕效果程式碼例項CSSS3
- CSS3滑鼠懸浮圖片縮小出現文CSSS3
- 滑鼠懸浮導航選單底部出現動畫橫線動畫
- BLOCK、BFC、邊距合併,滑鼠懸浮選單出現BloC
- 滑鼠懸浮div實現旋轉效果
- 滑鼠懸浮出現tips提示框效果程式碼例項
- js實現的表格隔行變色和滑鼠懸浮變色程式碼JS
- css滑鼠懸浮彈出說明層效果CSS
- 滑鼠懸浮按鈕背景變色效果程式碼例項
- html實現的滑鼠放在連結上出現文字提示效果HTML
- 滑鼠懸浮實現環形旋轉效果
- 滑鼠懸浮圖片實現翻轉效果
- 滑鼠懸浮圖片實現縮放效果
- ALaunch 0.8 := 懸浮提示
- css3實現滑鼠懸浮劃過光弧效果程式碼例項CSSS3
- 滑鼠懸浮相應的表單行背景變色且有填寫提示程式碼例項