前几天分享了天猫左侧悬浮代码，不明真相的客官请猛戳《天猫店铺悬浮代码分享》。后来在群里面看到有的亲提出一种效果，如图:

效果分析：鼠标滑过时，小猫进行位移，离开时，恢复位置。
其实这个原理是很简单的，在悬浮的基础上添加css3滑过属性。下面来分享源码框架：

<div style="height:300px;">
　<div class="sn-simple-logo" style="height:300px">
　　<div class="tm-mcBodyMask" style="background:none;opacity:1;width:10px;height:10px;">
　　  <div class="user-po_a gz1" >
　　    <a class="follow-btn j_CollectBrand" data-brandid="83776290" href="#" hidefocus="true" data-spm-anchor-id="a1z10.4.0.0" target="_blank"><img src="关注小猫图片" /></a>
　　  </div>
　  </div>
　</div>
</div>

下面对上述源码进行分析：

注：由于11月7号上午淘宝屏蔽掉了样式，最新方法参见于前面发表的《天猫店铺悬浮代码分享》一文，后续更新中介绍有方法。

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/code/2013-11-03/108.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。