滑鼠滑過鏈接出現信息框效果:在超鏈接中有一個自帶的效果,當滑鼠懸浮在鏈接之上的時候,能夠彈出提示框,使用title屬性就可以實現。代碼如下:螞蟻部落螞蟻部落創建於2012年,致力於前端知識的分享與交流。歡迎您,只有努力奮鬥才會有美好的未來。例子不夠美觀,這裡只是用來進行演示而已,代碼非常的簡單,這裡...
滑鼠滑過鏈接出現信息框效果:
在超鏈接中有一個自帶的效果,當滑鼠懸浮在鏈接之上的時候,能夠彈出提示框,使用title屬性就可以實現。
代碼如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> #box{ margin:100px; } a.tooltip{ position:relative; color:blue; } a.tooltip span{ display:none; } a.tooltip:hover span { display:block; font-size:12px; width:140px; height:30px; position:absolute; top:-2em; left:3em; background-color:#ccc; color:red; } </style> </head> <body> <div id="box"> <a href="#" class="tooltip">螞蟻部落<span>創建於2012年,致力於前端知識的分享與交流。</span></a> 歡迎您,只有努力奮鬥才會有美好的未來。 </div> </body> </html>
例子不夠美觀,這裡只是用來進行演示而已,代碼非常的簡單,這裡就不多介紹了,如果有任何問題可以跟帖留言。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=13424
更多內容可以參閱:http://www.softwhy.com/divcss/