js實(shí)現(xiàn)鼠標(biāo)移到鏈接文字彈出一個(gè)提示層的方法
更新時(shí)間:2015年05月11日 16:20:07 投稿:shichen2014
這篇文章主要介紹了js實(shí)現(xiàn)鼠標(biāo)移到鏈接文字彈出一個(gè)提示層的方法,涉及javascript鼠標(biāo)事件與css樣式的相關(guān)技巧,需要的朋友可以參考下
本文實(shí)例講述了js實(shí)現(xiàn)鼠標(biāo)移到鏈接文字彈出一個(gè)提示層的方法。分享給大家供大家參考。具體分析如下:
這里實(shí)現(xiàn)鼠標(biāo)移動到鏈接文字上面,彈出一個(gè)已定義好的DIV層的效果。在這個(gè)層里你可以加入與此鏈接對應(yīng)的信息,這樣就成了一個(gè)信息提示窗,在淘寶、新浪都能看到這種效果,很實(shí)用。
<!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>鼠標(biāo)移到文字上彈出提示層</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()"> 鼠標(biāo)放到這兒! </a> <div id="box" onmouseover="display()" onmouseout="disappear()"> 效果不錯吧?這里面你可以設(shè)置一張圖片,也可以是一段文字, 而且源代碼很簡單哦! </div> </body> </html>
希望本文所述對大家的javascript程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- JS實(shí)現(xiàn)鼠標(biāo)移動到縮略圖顯示大圖的圖片放大效果
- js控制鼠標(biāo)事件移動及移出效果顯示
- javascript 鼠標(biāo)懸浮圖片顯示原圖 移出鼠標(biāo)后原圖消失(多圖)
- js+html+css實(shí)現(xiàn)鼠標(biāo)移動div實(shí)例
- js鼠標(biāo)移動在title中顯示圖片的效果代碼
- 鼠標(biāo)拖拽移動子窗體的JS實(shí)現(xiàn)
- jsp js鼠標(biāo)移動到指定區(qū)域顯示選項(xiàng)卡離開時(shí)隱藏示例
- javascript實(shí)現(xiàn)圖片跟隨鼠標(biāo)移動效果的方法
- js實(shí)現(xiàn)GridView單選效果自動設(shè)置交替行、選中行、鼠標(biāo)移動行背景色
- JavaScript實(shí)現(xiàn)類似拉勾網(wǎng)的鼠標(biāo)移入移出效果
相關(guān)文章
教你用幾十行js實(shí)現(xiàn)很炫的canvas交互特效
HTML5中的大部分動畫都是通過Canvas實(shí)現(xiàn),因?yàn)镃anvas就像一塊畫布,我們可以通過調(diào)用腳本在Canvas上繪制任意形狀,甚至是制作動畫,這篇文章主要給大家介紹了關(guān)于用幾十行js實(shí)現(xiàn)很炫的canvas交互特效的相關(guān)資料,需要的朋友可以參考下2021-11-11requirejs按需加載angularjs文件實(shí)例
本篇文章主要介紹了requirejs按需加載angularjs文件實(shí)例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06