超链接伪类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接伪类</title>
<!--超链接伪类 用来定义超链接在鼠标点击的不同时期的样式-->
<!--a:link 定义a元素未访问时的样式-->
<!--a:visited 定义a元素访问后的样式-->
<!--a:hover 定义鼠标经过a元素时的样式-->
<!--a:active 定义鼠标点击激活时的样式-->
<style>
/*a {*/
/* text-decoration: none;*/
/*}*/
/*a:link {*/
/* color: red;*/
/*}*/
/*a:visited {*/
/* color: green;*/
/*}*/
/*a:hover {*/
/* color: orange;*/
/*}*/
/*a:active {*/
/* color: blue;*/
/*}*/
/*一般只用定义未访问时状态和鼠标经过状态*/
a {
color: red;
text-decoration: none;
}
a:hover {
color: blue;
text-decoration: underline;
}
</style>
</head>
<body>
<a href="https://www.baidu.com" target="_blank">百度一下</a>
</body>
</html>
深入了解:hover
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>深入了解:hover</title>
<style>
div {
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
color: white;
background: lightskyblue;
}
/*:hover伪类不仅仅用于a元素*/
div:hover {
background-color: hotpink;
}
img:hover {
border: 2px solid red;
}
</style>
</head>
<body>
<div>百度一下</div>
<img src="img/htmlcssjs-overview.png" alt="">
</body>
</html>
鼠标样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标样式</title>
<!--cursor属性 定义鼠标样式 常用有三种-->
<!--default 默认鼠标样式-->
<!--pointer 鼠标点击样式-->
<!--text 鼠标文本样式-->
<style>
div {
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
background-color: hotpink;
color: white;
font-size: 14px;
}
#div_default {
cursor: default;
}
#div_pointer {
cursor: pointer;
}
</style>
</head>
<body>
<div id="div_default">鼠标默认样式</div>
<div id="div_pointer">鼠标手装样式</div>
</body>
</html>
练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Practice</title>
<style>
a {
color: red;
text-decoration: none;
}
a:hover {
color: blue;
text-decoration: underline;
}
</style>
</head>
<body>
<a href="https://www.baidu.com" target="_blank">百度一下,你就知道</a>
</body>
</html>