前言：
当前小伙伴们对“css超链接的四种状态怎么设置”大致比较关注，朋友们都需要剖析一些“css超链接的四种状态怎么设置”的相关知识。那么小编在网摘上收集了一些有关“css超链接的四种状态怎么设置””的相关知识，希望大家能喜欢，看官们快快来学习一下吧！视频加载中...
一、超链接不同时期的样式
1、默认情况下：字体为蓝色，带有下划线。
2、鼠标点击时：字体为红色，带有下划线。
3、鼠标点击后：字体为紫色，带有下划线。
二、超链接伪类
用伪类定义鼠标点击的不同时期样式。
语法(必须按照顺序定义）;
a:link{…} // 定义a元素未访问时的样式a:visited{…} // 定义a元素访问后的样式a:hover{…} // 定义鼠标经过a元素时的样式a:active{…} //定义鼠标点击激活时的样式举例：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>17列表</title> <style type="text/css"> a{text-decoration: none;} //表示去掉超链接默认样式中的下划线。 a:link{color: #FF0000;} a:visited{color: purple;} a:hover{color: yellow;} a:active{color: blue;}</style> </head> <body> <a href="; target="_blank">百度网</a> </body></html>使用注意事项：
实际开发中，每一个链接不一定非要用到四种状态。经常会用的就是：未访问状态和鼠标经过状态。
语法：
a{…}a:hover{…}举例：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>17列表</title> <style type="text/css"> a { color: #FF0000; text-decoration: none; } a:hover{ color: yellow; text-decoration: underline; }=</style> </head> <body> <a href="; target="_blank">百度网</a> </body></html>三、hover定义鼠标经过超链接时的样式
hover不仅适用于a元素，同样适用于其他元素，
语法：
元素:hover{…}在div中举例：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>17列表</title> <style type="text/css">div{ width: 200px; height: 40px; background-color: yellow; }div:hover{ background-color: green;}</style> </head> <body> <div>hover的应用</div> </body></html>在img中的应用
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>17列表</title> <style type="text/css">img:hover{ border: 2px solid red;}</style> </head> <body> <img src="img/cup.png"> </body></html>四、浏览器鼠标样式
语法：
cursor: 取值;
常用属性值：
举例：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>17列表</title> <style type="text/css">div{ width: 150px; height: 40px; }#div1{ background-color: bisque; cursor:default; }#div2{ background-color: darkgoldenrod; cursor:pointer; }</style> </head> <body> <div id=div1></div> <div id=div2></div> </body></html> 版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #css超链接的四种状态怎么设置
