CSS设置链接<a>四个状态

快乐打工仔 分类:实例代码

CSS设置链接<a>四个状态属于前端实例代码,有关更多实例代码大家可以查看

本章节介绍一下如何设置链接<a>四个状态。

(1).默认状态,也就是没有进行任何操作的状态,对应的css代码是a:link。

(2).鼠标悬浮状态,也就是当鼠标放在链接上时候的状态,对应的css代码是a:hover。

(3).鼠标按下状态,这个时候鼠标在连接上已经按下,但是还没有松开的状态,对应的css代码是a:active。

(4).鼠标点击过的状态:也就是鼠标点击过链接并松开之后的状态,对应的css代码是:a:visited。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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设置链接<a>四个状态,这样的场景在实际项目中还是用的比较多的,关于CSS设置链接<a>四个状态就介绍到这了。

回复

我来回复
  • 暂无回复内容