CSS設定連結<a>四個狀態

antzone發表於2018-07-09
CSS

本章節介紹一下如何設定連結<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的四個狀態。

特別說明：四個連結偽類的順序是固定的，否則可能會出現問題。

相關文章