超链接伪类
上面有四种状态的链接:
伪类 | 阐明 |
---|---|
a:link | 定义a元素未拜访时的款式 |
a:visited | 定义a元素拜访后的款式 |
a:hover | 定义鼠标通过a元素时的款式 |
a:active | 定义鼠标点击激活时的款式 |
在应用这四个伪类时,肯定要依照“link、visited、hover、active”的程序进行,不然可能无奈失常显示这4种款式。
个别咱们记住一个就够了:a:hover。a:link间接在a标签中批改款式就行了。
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>超链接伪类</title> <style type="text/css"> a{color: red;text-decoration: none;} a:hover{color:cadetblue;text-decoration: underline;} </style></head><body> <a href="https://www.baidu.com">百度首页</a></body></html>
显示成果:
hover的深刻应用
hover不仅能够应用在标签中
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>超链接伪类</title> <style type="text/css"> /* a{color: red;text-decoration: none;} */ /* a:hover{color:cadetblue;text-decoration: underline;} */ img{width: 350px;height:150px;} img:hover{border:aqua solid 10px; } </style></head><body> <!-- <a href="https://www.baidu.com">百度首页</a> --> <img src="./HTML.png" alt="html"></body></html>
显示成果:
鼠标没有通过时:
鼠标通过时: