共计 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>
显示成果:
鼠标没有通过时:
鼠标通过时:
正文完