纯css代码写的，可以弹出二维码：

.box {width: 1190px;

 background: #ccc;

  color: #000;

  font-size: 36px;

  text-align: center;

  margin: 0 auto;

}

.toolbar {

  position: fixed;

  bottom: 25px;

  /*left: 50%;

  margin-left: -26px;*/

  /*top: 50%;

  margin-top: -106px;*/

  right: 5px;

}

.toolbar-item {

  position: relative;

  display: block;

  width: 52px;

  height: 52px;

  background: url(../images/toolbar.png) center center no-repeat;

  margin-top: 1px;

  transition: background-position 1s;

}

.toolbar-item-weixin {

  background-position: 0 -798px;

}

.toolbar-item-weixin:hover {

  background-position: 0 -860px;

}

/*.toolbar-item:hover .toolbar-layer {

  opacity: 1;

  filter: alpha(opacity=100);

  transform: scale(1);

}*/

.toolbar-item-weixin:hover .toolbar-layer, .toolbar-item-app:hover .toolbar-layer {

  opacity: 1;

  filter: alpha(opacity=100);

  transform: scale(1);

}

.toolbar-item-feedback {

  background-position: 0 -426px;

}

.toolbar-item-feedback:hover {

  background-position: 0 -488px;

}

.toolbar-item-app {

  background-position: 0 -550px;

}

.toolbar-item-app:hover {

  background-position: 0 -612px;

}

.toolbar-item-top {

  background-position: 0 -674px;

}

.toolbar-item-top:hover {

  background-position: 0 -736px;

}

.toolbar-layer {

  position: absolute;

  right: 46px;

  bottom: -10px;

  width: 172px;

  background: url(../images/toolbar.png) no-repeat;

  opacity: 0;

  filter: alpha(opacity=0);

  transform: scale(0.01);

  /*transform-origin: right bottom;*/

  transform-origin: 95% 95%;

  transition: all 1s;

}

.toolbar-item-weixin .toolbar-layer {

  height: 212px;

  background-position: 0px 0px;

}

.toolbar-item-app .toolbar-layer {

  height: 194px;

  background-position: 0 -222px;

}

我也是用css的，就是做到选择toolbar-layout私有属性的时候就不知道怎么做了。

@charset "utf-8";

/* CSS Document */

.toolbar{position:fixed;left:50%;bottom:5px;margin-left:-26px}

.toolbar-item{display:block;width:52px;height:52px;background-image:url(toolbar.png); background-repeat:no-repeat;margin-top:1px;position:relative;}

.toolbar-item:hover toolbar-layer{opacity:1;transform:scale(1);}

.toolbar-item-weixin{background-position: 0 -798px;}

.toolbar-item-weixin toolbar-layer{height:212px;background-position:0 0;}

.toolbar-item-weixin:hover{background-position: 0 -860px;}

.toolbar-item-feedback{background-position:0 -426px;}

.toolbar-item-feedback:hover{background-position:0 -488px;}

.toolbar-item-app{background-position:0 -550px;}

.toolbar-item-app toolbar-layer{height:194px;background-position:0 -222px;}

.toolbar-item-app:hover{background-position:0 -612px;}

.toolbar-item-top{background-position:0 -674px;}

.toolbar-item-top:hover{background-position:0 -736px;}

.toolbar-layer{positon:absolute;right:52px;bottom:0;width:172px;background-image:url(toolbar.png);background-repeat:no-repeat;opacity:0;filter:alpha(opacity=0);transform:scale(0.01);}