超链接在鼠标单击的不同时期的样式：
定义超链接在鼠标单击的不同时期的样式。
/*4个伪类，定义顺序不能改变*/
a:link{...}/*a元素未访问时样式*/
a:visited{...}/*a元素访问后样式*/
a:hover{...}/*鼠标经过a元素时样式*/
a:active{...}/*鼠标单击激活a元素时样式*/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> </title>
<style type="text/css">
a{text-decoration:none;}
a:link{color:red;}
a:visited{color:purple;}
a:hover{color:yellow;}
a:active{color:blue;}
</style>
</head>
<body>
<a href="http://www.lvyestudy.com" target="_blank">绿叶学习网</a>
</body>
</html>
实际只会用到两种状态：未访问状态和鼠标经过状态。
a{...}
a:hover{...}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> </title>
<style type="text/css">
a
{
color:red;
text-decoration: none;
}
a:hover
{
color:blue;
text-decoration:underline;
}
</style>
</head>
<body>
<div>
<a href="http://www.lvyestudy.com" target="_blank">绿叶学习网</a>
</div>
</body>
</html>
:hover伪类可定义任何一个元素在鼠标经过时的样式。
元素:hover{...}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div
{
width:100px;
height:30px;
line-height:30px;
text-align:center;
color:white;
background-color: lightskyblue;
}
div:hover
{
background-color: hotpink;
}
</style>
</head>
<body>
<div>绿叶学习网</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
img:hover
{
border:2px solid red;
}
</style>
</head>
<body>
<img src="img/girl.gif" alt="">
</html>
cursor:取值;
常用
default（默认）、pointer、text
其他
crosshair、wait、help、move
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
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>
cursor:url(图片地址), 属性值;