1、准备好需要用到的图标。
2、新建html文档。
3、书写hmtl代码。<div id="aaa"> <ul> <li><span><img src="1.png" /></span><a href="#">联系我们</a></li> <li><span><img src="2.png" /></span><a href="#">首页地址</a></li> <li><span><img src="3.png" /></span><a href="#">百度经验</a></li> </ul></div>
4、书写css代码。<style>*{ margin:0; padding:0; list-style:none;}img{ border:0;}body{ background:#fff;}#aaa{ width:150px; height:auto; margin:200px auto; background:#F2F2F2; padding:20px;}#aaa ul li{ height:42px; line-height:42px; padding-left:50px; text-align:left; margin:5px; position:relative; overflow:hidden;}#aaa ul li span{ width:42px; height:84px; display:block; position:absolute; left:0; top:0;}#aaa ul li a{ text-decoration:underline; color:#656565; font-size:12px;}#aaa ul li:hover a{ text-decoration:none; color:#BC0000;}</style>
5、书写并添加js代码。<script src="jquery.min.js"></script><script>$(function(){ $('#aaa li').hover(function(){ $('span',this).stop().an imate({'top':'-42px'}); },function(){ $('span',this).stop().ani mate({'top':'0px'}); });});</script>
6、代码整体结构。
7、查看效果。
