前端入门学习笔记二十八-CSDN博客

本文链接：https://blog.csdn.net/m0_65384293/article/details/128154133

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type = "text/css">
			a:link {
			  color: skyblue;
			}
			a:visited {
			  color: deepskyblue;
			}
			a:hover {
			  color: plum;
			}
			a:active {
			  color: lightblue;
			}
		</style>
	</head>
	<body>
		<a href="https://www.baidu.com" target = "_blank">百度</a>
	</body>
</html>

锚伪类
链接能够以不同的方式显示

a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！a:active 必须在 CSS 定义中的 a:hover 之后才能生效！伪类名称对大小写不敏感

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type = "text/css">
			a:kjys:hover {
			  color: lightblue;
			}
		</style>
	</head>
	<body>
		<a href="https://www.baidu.com" target = "_blank">百度</a>
	</body>
</html>

锚伪类
链接能够以不同的方式显示
伪类和 CSS 类
伪类可以与 CSS 类结合使用：
当您将鼠标悬停在例子中的链接上时，它会改变颜色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type = "text/css">
			div:hover {
			  background-color:skyblue;
			}
		</style>
	</head>
	<body>
		<a href="https://www.baidu.com" target = "_blank">百度</a>
	</body>
</html>

悬停在 <div>上
在 <div> 元素上使用 :hover 伪类的实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type = "text/css">
			p{
				display:none;
				background-color:skyblue;
				padding:30px;
			}
			div:hover p{
				display:plum;
			}
		</style>
	</head>
	<body>
		<a href="https://www.baidu.com" target = "_blank">百度</a>
	</body>
</html>

简单的工具提示悬停
把鼠标悬停到 <div> 元素以显示 <p> 元素（类似工具提示的效果）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type = "text/css">
			p:first-chid{
				color:skyblue;
			}
		</style>
	</head>
	<body>
		<a href="https://www.baidu.com" target = "_blank">百度</a>
	</body>
</html>