PHILIP SU的PIXNET小站

大家不知道有沒注意到在我的部落格網頁裡,

當滑鼠游標移到有超連結的圖文時,

圖文會產生被壓到的動作呢?!

其實這種動作很容易產生的!

先進入[管理部落格], 點選[面板制定], 再選擇[自訂樣式],

在[自訂樣式]的CSS文件中,

開頭的語法是:

/*customization CSS*/

/*Links*/
a,a:link,a:visited{color:#0066CC;}
a:hover{color:#993333;}

現在將它改為以下語法

/*customization CSS*/

/*Links*/
a,a:link,a:visited{color:#0066CC;}
a:hover{color:#993333;position:relative;top:2px;left:2px;}

原先語法 (a:hover) 的用意只是當游標移到有超連結的圖文時,

讓文字的顏色由#0066cc變成#993333

而多加position:relative;top:2px;left:2px的用意是

當游標移到有超連結的圖文時, 讓圖文以其原先相對位置向上及左各移2個畫素

而產生了近似按鈕的動作!

@資料參考自[最新HTML&CSS網頁程式設計]一書