超链接伪类

上面有四种状态的链接:

伪类阐明
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>

显示成果:
鼠标没有通过时:

鼠标通过时: