Nine Palace of self-made hair a bit slag can refer to 2016-01-12 22:47:38
<! DOCTYPE >
<meta name= "keywords" content= "CSS3 effects, cool nine Gongter effect, CSS3 animation, mouse over picture rollover effects, div css,:hover,transition" >
<style type= "Text/css" >
*{margin:0px; padding:0px;}
#Div {width:154px;
height:153px;
Border:solid 2px Darkblue;
margin:20px Auto;
position:relative;
Text-align:center;
}
#Div a img{width:50px;
height:50px;
Display:block;
Float:left;
left:9999px;//the key
top:51px;
Position:absolute;
}
#Div a{
width:50px;
height:50px;
margin:0 1px 1px 0;
Background:blueviolet;
Text-decoration:none;
line-height:50px;
display:block;//the key
Float:left;
}
#Div a:hover img {left:51px;}
#Div a:hover{Background:darkgreen;}
#Div #IMG {float:left; width:50px;left:51px;top:51px;
height:50px;}
</style>
<body>
<!--pure CSS for cool nine Gongge effects--
<div id= "div" >
<a href= "#" >1</a>
<a href= "#" >2</a>
<a href= "#" >3</a>
<a href= "#" >4</a>
<a href= "#" >6</a>
<a href= "#" >7</a>
<a href= "#" >8</a>
<a href= "#" >9</a>
</div>
<!--end-->
</body>
Nine-Lattice Palace