Foreword
Goal of this section is implemented using HTML CSS - switching the icon state, the effect as in FIG.
HTML tags four state <a>
This demo use <a> html tag is to demonstrate, <a> also a four-state, as follows:
a: link / * unvisited state * /
a: visited / * already visited the state * /
a: hover / * move the mouse over the link when the state * /
a: active / * state of the mouse press down * /
This section only achieved where the tri-state conversion, respectively: link, hover, active, the icon follows
The icon is 90x30 size
HTML code
The picture shows the contents of the folder demo, wherein img folder is stored in a tri-state icon shown above, wherein follows test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.test a{background: url(img/testweb.png) no-repeat scroll 0 0 transparent;
width: 30px;
display: block;
height: 30px;
line-height: 12em;
overflow: hidden;
}
.test a:hover{
background-position: -30px 0px;
}
.test a:active{
background-position: -60px 0px;
}
</style>
</head>
<body>
<div class="test">
<a >关闭</a>
</div>
</body>
</html>
The project Click here to download
You can see the code is actually not much, because I was white, good memory as bad written, then I will use the knowledge above tidy
