关于css:CSS超链接样式

8次阅读

共计 856 个字符，预计需要花费 3 分钟才能阅读完成。

上面有四种状态的链接：

伪类	阐明
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 不仅能够应用在标签中

<!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>

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

鼠标通过时：

正文完