css设置链接<a>四个状态代码实例:
本章节介绍一下如何设置链接<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.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设置链接<a>四个状态代码实例一章节。
时间： 2024-10-12 16:52:16