likes
comments
collection
share

CSS超链接样式

作者站长头像
站长
· 阅读数 297

超链接伪类

下面有四种状态的链接：

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

显示效果：CSS超链接样式

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>

显示效果：鼠标没有经过时：CSS超链接样式鼠标经过时：CSS超链接样式