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>四个状态就介绍到这了。