單純使用CSS實現動態(tài)提示信息
更新時間：2006年09月25日 00:00:00 作者：
也許已經有人發(fā)現可以這樣寫...
CSS代碼部分
a.info {
position:relative; z-index:0; background-color:#ccc; color:#000; text-decoration:none }
a.info:hover {
z-index:1; background-color:#ff0 }
a.info span {
display: none }
a.info:hover span {
display:block; position:absolute; top:12px; left:2px; width:160px; border:1px solid #0cf; background-color:#cff; color:#000; text-align: center }
body區(qū)調用方法
1.<a class="info" href="javascript:;"><b>需要添加注釋的文本</b><span>提示信息</span></a>
2.<a class="info" href="javascript:;"><img src="需要添加注釋的圖片"><span>提示信息</span></a>
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
CSS代碼部分
a.info {
position:relative; z-index:0; background-color:#ccc; color:#000; text-decoration:none }
a.info:hover {
z-index:1; background-color:#ff0 }
a.info span {
display: none }
a.info:hover span {
display:block; position:absolute; top:12px; left:2px; width:160px; border:1px solid #0cf; background-color:#cff; color:#000; text-align: center }
body區(qū)調用方法
1.<a class="info" href="javascript:;"><b>需要添加注釋的文本</b><span>提示信息</span></a>
2.<a class="info" href="javascript:;"><img src="需要添加注釋的圖片"><span>提示信息</span></a>
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
相關文章
詳談 CSS樣式表使用：鏈接/嵌入...2006-09-09
使用#default#userdata組件實現的可記憶內容的編輯器
使用#default#userdata組件實現的可記憶內容的編輯器...2006-08-08
利用CSS控制SELECT中的OPTION是否不允許選...2006-09-09
在日常布局當中，會遇到文本內容超過容器的情況。非常常見的一種解決方案是超出省略。但是有的時候，由于場景的限制，可能會出現在一些無法使用超出打點省略的方法的場景，譬如在導航欄中：在容器定寬但是文本又溢出且不能換行的情況下，我們就需要尋求另外的解決方案。2021-05-05
這篇文章主要介紹了關于在網頁制作中如何添加背景圖片,我們通常使用background來添加網頁的背景圖,需要的朋友可以參考下2023-04-04
今天制作了一個響應式導航條，能夠自動隨著不同的屏幕分辨率或瀏覽器窗口大小的不同而改變導航條的樣式，這里主要用到的就是CSS3的Media Query。2014-05-05
這篇文章主要介紹了CSS自定義滾動條樣式案例詳解,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內容,需要的朋友可以參考下2021-08-08
大家都知道，position:fixed在日常的頁面布局中非常常用，在許多布局中起到了關鍵的作用。但是，在許多特定的場合，指定了position:fixed的元素卻無法相對于屏幕視口進行定位。這是為何呢？2021-05-05
讓comment標記在各瀏覽器都能通用...2006-09-09
用js控制css的不錯的方法...2006-09-09