快捷導航

CSS 動態(tài)鏈接提示

更新時間：2009年10月25日 18:47:19 作者：

CSS實現(xiàn)動態(tài)的鏈接提示，帶動畫效果，當然，這不光是CSS的功勞，JavaScript也用上了，當你把鼠標放到文字上的時候，你就會看到一行提示文字出現(xiàn)的效果了。

<html> <head> <title>動態(tài)的鏈接提示</title> <STYLE type=text/css> .article { BACKGROUND-COLOR: #ffcc00; BORDER-BOTTOM: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; FILTER: revealTrans(transition=23,duration=0.5) blendTrans(duration=0.5); PADDING-BOTTOM: 3px; PADDING-LEFT: 3px; PADDING-RIGHT: 3px; PADDING-TOP: 3px; POSITION: absolute; VISIBILITY: hidden } A:hover { COLOR: #c0c0c0; TEXT-DECORATION: underline overline } .drop { FILTER: dropshadow(color=000000, offx=1, offy=1, positive=1) } .drop2 { FILTER: dropshadow(color=ffffff, offx=1, offy=1, positive=1) } </STYLE>  </head> <body> <div align="center"><a href="#" onMouseOver=Show(ccc) onMouseOut=Hide(ccc)>ASP是什么語言呢？</a> </div> <div   class="vvxyksv9kd"   id="ccc" class="article">這里是您的提示內(nèi)容</div> <div align="center"><a href="#" onMouseOver=Show(ddd) onMouseOut=Hide(ddd)>PHP是什么呢？</a> </div> <div   class="vvxyksv9kd"   id="ddd" class="article">注意到了嗎？隨機動態(tài)提示</div> <div align="center"><a href="#" onMouseOver=Show(eee) onMouseOut=Hide(eee)>ASP.NET又是什么呢？</a> </div> <div   class="vvxyksv9kd"   id="eee" class="article">隨機動態(tài)提示</div> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

相關(guān)文章

javascript 實用的文字鏈提示框效果
鼠標滑過文章中的鏈接文字，要在相應(yīng)位置彈出提示框，提示框的樣式由css來控制，高度自適應(yīng)；鼠標可以點擊提示框的中的鏈接,滑離提示框時，框自動消失
2010-06-06
Js制作點擊輸入框時默認文字消失的效果
為了提高用戶體驗和易用度，一些設(shè)計師會對網(wǎng)頁中用戶經(jīng)常用的東西進行優(yōu)化，比如輸入框。一般的輸入框是怎樣優(yōu)化的呢？從用戶體驗的角度出發(fā)，簡化用戶使用步驟，讓用戶用得更方便就是提高了易用性
2015-09-09
純CSS 鏈接懸停提示效果代碼
CSS做出漂亮的鼠標懸停提示效果，使用層的絕對定位，不管你的網(wǎng)頁窗口如何變化，提示層始終處于理想位置不會改變，兼容性也良好，因些很實用的一個鏈接提示功能代碼。
2009-10-10
Javascript把小寫字母依次變?yōu)榇髮懀瑖栏駚碚f不算是大小寫轉(zhuǎn)換程序，它主要是把文字按一定順序依次變?yōu)樾懙?，估計有人要用到吧?
2009-10-10