本文内容来自慕课网的侧栏工具条开发。
效果： 鼠标划过每一个小方框，切换图片，且微信和APP会在左边显示二维码图
实现原理：鼠标划过——背景图片位置的改变，二维码图片从0.01的比例变为1，不透明变透明
HTML部分：
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>侧边栏</title>
<link rel=stylesheet href="style.css">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<script src="require.js" data-main="main"></script>
</head>
<body>
<div class="toolbar">
<a href="javascript:;" class="toolbar-item toole-item-weixin">
<span class="toolbar-layer"></span>
</a>
<a href="javascript:;" class="toolbar-item toole-item-feedback"></a>
<a href="javascript:;" class="toolbar-item toole-item-app">
<span class="toolbar-layer"></span>
</a>
<a href="javascript:;" class="toolbar-item toole-item-top"></a>
</div>
</body>
</html>
CSS部分：
.toolbar{
position: fixed;left:50%;margin-left:-26px;bottom:5px; //这里用的是水平居中，一般情况下是在页面右下角，可自己定义
}
.toolbar-item,.toolbar-layer{
background: url("images/toolbar.png") no-repeat;
}
.toolbar-item{
position:relative;display: block;width:52px;height:52px;margin-top: 1px;
-webkit-transition:background-position 1s;
-moz-transition:background-position 1s;
transition:background-position 1s; //给hover效果加一点变换，切换时没那么生硬
}
.toolbar-item:hover .toolbar-layer{
opacity:1;filter:alpha(opacity=100);transform:scale(1); //划过，二维码变不透明
}
.toole-item-weixin{
background-position: 0 -798px;
}
.toole-item-weixin:hover{
background-position:0 -860px;
}
.toole-item-weixin .toolbar-layer{
background-position:0 0;height:212px;
}
.toole-item-feedback{
background-position: 0 -426px;
}
.toole-item-feedback:hover{
background-position:0 -488px;
}
.toole-item-app{
background-position: 0 -550px;
}
.toole-item-app .toolbar-layer{
background-position:0 -222px;height:194px;
}
.toole-item-app:hover{
background-position: 0 -612px;
}
.toole-item-top{
background-position: 0 -674px;
}
.toole-item-top:hover{
background-position: 0 -736px;
}
.toolbar-layer{
position: absolute;width:172px;right:46px;bottom:-10px;opacity:0;filter:alpha(opacity=0);
transform-origin:95% 95%;transform:scale(0.01); //设置初始为0.01的大小，全透明，二维码相对于父元素A为绝对定位 因背景图片带有阴影，为使看起来与父元素对齐，使用了right:46px;bottom:-10px; transform-origin:95% 95%;表示透明度变化从右下角开始，也是因为阴影的缘故，设置了95%
-webkit-transition:all 1s;
-moz-transition:all 1s;
transition:all 1s; //透明度和大小变化时间
}
原文地址：http://ppxxll.blog.51cto.com/10549080/1680224
