本文實例講述了js實作滑鼠移到連結文字彈出一個提示層的方法。分享給大家供大家參考。具體分析如下:
這裡實作滑鼠移動到連結文字上面,彈出一個已定義好的DIV層的效果。在這個層裡你可以加入與此連結對應的訊息,這樣就成了一個訊息提示窗,在淘寶、新浪都能看到這種效果,很實用。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>鼠标移到文字上弹出提示层</title> <style type="text/css"> <!-- #box{ display:none; width: 315px; height: 180px; background:#CCC; border:1px solid #333; padding:12px; text-align:center; } --> </style> <script type="text/javascript" language="javascript" > <!-- function display(){ document.getElementById("box").style.display="block"; } function disappear(){ document.getElementById("box").style.display="none"; } --> </script> </head> <body> <a href="#" onmouseover="display()" onmouseout="disappear()"> 鼠标放到这儿! </a> <div id="box" onmouseover="display()" onmouseout="disappear()"> 效果不错吧?这里面你可以设置一张图片,也可以是一段文字, 而且源代码很简单哦! </div> </body> </html>
希望本文所述對大家的javascript程式設計有所幫助。