关于css:CSS超链接样式

38次阅读

共计 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 的深刻应用

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>

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

鼠标通过时:

正文完
 0