CSS設定連結<a>四個狀態
本章節介紹一下如何設定連結<a>四個狀態。
(1).預設狀態,也就是沒有進行任何操作的狀態,對應的css程式碼是a:link。
(2).滑鼠懸浮狀態,也就是當滑鼠放在連結上時候的狀態,對應的css程式碼是a:hover。
(3).滑鼠按下狀態,這個時候滑鼠在連線上已經按下,但是還沒有鬆開的狀態,對應的css程式碼是a:active。
(4).滑鼠點選過的狀態:也就是滑鼠點選過連結並鬆開之後的狀態,對應的css程式碼是:a:visited。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> a:link{ color:blue; text-decoration:underline; } a:visited{ color:red; text-decoration:none; } a:hover{ color:green; text-decoration:underline; } a:active{ color:yellow; text-decoration:noe; } </style> </head> <body> <a href="#">螞蟻部落</a> </body> </html>
在上面的程式碼中,設定了連結a的四個狀態。
特別說明:四個連結偽類的順序是固定的,否則可能會出現問題。
相關文章
- CSS 設定連結樣式CSS
- AngularJS動態設定CSSAngularJSCSS
- CSS設定滑鼠指標形狀CSS指標
- GPUDepthStencilState物件設定depthStencil狀態GPU物件
- css設定四角邊框CSS
- MUI——設定沉浸式狀態列UI
- CSS設定連線<a>的樣式CSS
- 設定連結<a>的尺寸
- [前端 · 面試 ]HTTP 總結(四)—— HTTP 狀態碼前端面試HTTP
- laravel + guzzle 讀取網站連結http狀態Laravel網站HTTP
- 直播app原始碼,狀態列和導航欄設定成透明狀態APP原始碼
- 圖解HTTP《四》:返回結果的HTTP狀態碼圖解HTTP
- 使用 setResponseStatus 函式設定響應狀態碼函式
- 設定gbase叢集節點離線狀態
- 動態連結庫與靜態連結庫
- CSS設定半個文字的樣式CSS
- 【連結 1】與靜態連結庫連結
- Flink的狀態程式設計和容錯機制(四)程式設計
- 設定連結a可用和不可用
- cmake 連結動態連結庫
- css字型設定CSS
- CSS設定第n個li元素樣式CSS
- CSS 設定第n個li元素樣式CSS
- CSS3 設定多個背景圖片CSSS3
- CSS設定一個文字兩種顏色CSS
- CSS 設定前n個li元素樣式CSS
- Flutter狀態管理Provider(四) Selector使用FlutterIDE
- 抓包整理外篇——————狀態列[ 四]
- 靜態連結動態連結的連結順序問題和makefile示例
- vue-button設定按鈕是否可點選狀態Vue
- Docsify 的 GitHub 連結在那裡設定的Github
- 鐵威馬NAS如何設定連結聚合
- CSS3動態餅狀圖效果CSSS3
- 狀態機設計
- PostgreSQL的idle in transaction連線狀態SQL
- 如何連結兩個名字一樣動態庫
- CSS設定背景模糊CSS
- CSS設定文字省略CSS