<ul class="partnersLogo"> <li> <a href="http://www.chinapnr.com/" target="_blank"> <div class="border_top"></div> <div class="border_right"></div> <div class="border_bottom"></div> <div class="border_left"></div> <img src="../images/home/partnersLogo2.jpg" alt="" /> </a> </li> </ul>
.partners li a{
display:block;
}
.partners li{
float:left;
height:39px;
padding:12px 0;
line-height:39px;
margin-right:7px;
position:relative;
}
.border_top{ position:absolute; height:1px; 0; font-size:0; background:#49d6da; top:11px; left:-1px; -webkit-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out; transition:all 0.3s ease-out; } .border_right{ position:absolute; height:0; 1px; font-size:0; background:#49d6da; bottom:9px; right:-1px; -webkit-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out; transition:all 0.3s ease-out; } .border_bottom{ position:absolute; height:1px; 0; font-size:0; background:#49d6da; right:0; bottom:9px; -webkit-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out; transition:all 0.3s ease-out; } .border_left{ position:absolute; height:0; 1px; font-size:0; background:#49d6da; left:-1px; top:12px; -webkit-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out; transition:all 0.3s ease-out; } .partners li a:hover .border_top{120px} .partners li a:hover .border_bottom{119px} .partners li a:hover .border_left,.partners li a:hover .border_right{height:42px}