CSS超链接伪类实战：hover与active的应用-CSDN博客

本文链接：https://blog.csdn.net/ZXS1002/article/details/122913837

回顾

超链接伪类（我们常用的就这两个）：
hover 鼠标悬停
active 鼠标选择（按压）

简单应用

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接伪类</title>
    <style>
        a{
            text-decoration: none;
            color: blue;
        }
        img{
            width: 180px;
            height: 200px;
        }
        /*超链接伪类
        hover  鼠标悬停
        active  鼠标选择（按压）*/
        a:hover{
            font-size: 40px;
            color: deeppink;
        }
        a:active{
            text-decoration: underline;
            color: yellow;
        }
        /*text-shadow : 颜色 水平偏移 垂直偏移 阴影半径*/
        #price{
            text-shadow: deeppink -3px 3px 1px;
        }
    </style>
</head>
<body>

<a href="#">
    <img src="images/三国演义.jpeg" alt="三国演义">
</a>
<p><a href="#">三国演义</a></p>
<p><a href="">作者：罗贯中</a></p>
价格：<d id="price">￥66</d>

</body>
</html>

样式css

#nav{
    width: 500px;
    background: gray;
}
.title{
    font: 30px bold 隶书;
    text-indent: 1em;
    line-height: 40px;
    background: red url("../images/d.png") no-repeat 450px 12px;
}
a{
    font: 20px bold;
    text-decoration: none;
    color: black;
}
a:hover{
    color: yellow;
}
ul{
    background: gray;
}

ul li{
    line-height: 50px;
    list-style: none;
    text-indent: 2em;
    background: gray url("../images/r.png") no-repeat 420px 16px;
}