.sidebar{
position: fixed; right: 0; top: 50%; margin-top: -80px; width: 55px; background: rgba(0,0,0,0.3); padding: 12px 0 0 0; border-radius:8px 0 0 8px; z-index:999999;
}
.sidebar li{
height: 50px; width: 160px; padding-left: 17px; border-radius:8px 0 0 8px;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.sidebar li img{
display: block;
}
.sidebar li:hover{
margin-left: -105px; background: rgba(0,0,0,0.6);
}
a{outline:none; text-decoration:none;} a:hover{ text-decoration:underline;}
li{list-style:none;}

<div class="sidebar">
<ul>
<li><a href="tencent://message/?uin=420372358&Site=bdesign.com.cn&Menu=yes" target="_blank"><img src="imgs/img58.png"></a></li>
<li><a href="#"><img src="imgs/img59.png"></a></li>
<li><a href="#"><img src="imgs/img611.png"></a></li>
<li><a href="#"><img src="imgs/email.png"></a></li>
<li><a href="#hero"><img src="imgs/img60.png"></a></li>
</ul>
</div>