在淘宝店铺中，大家经常能够见到，当鼠标移入图片时，会有另一张图片或者内容显示出来，在之前淘宝美工一站式的课程中，我们使用的是弹出层淘宝组件J_TWidget来做的，但是这种做法很显然有点麻烦，这个课程主要介绍用淘宝官方提供的类来做这种鼠标移入后的交互效果，这种做法非常的简单，只需要记住他的结果就行了，下面是作者.王晓楠给大家总结的代码，可以结合视频教程和下面的代码进行相应的练习，应该可以帮助到你的。

******代码开始*******

<div class="footer-more" style="padding:0; width:auto; top:0; margin-right:10px">
<a href="#" target="_blank">
        <img src="..."/>        
        <div class="footer-more-panel" style="bottom:0; right:0; padding:0; border:none;">鼠标移入后的效果</div>
     </a>    
</div>

********代码结束******

如果想看弹出层的交互效果，大家可以学习淘宝美工一站式的课程。地址如下，复制打开：
​​​​​​​https://ke.qq.com/course/163533#tuin=1db082ca




​​​​​​​