>[success] # 图标转换案例 >[danger] ##### 效果 **页面展示效果** ![](https://box.kancloud.cn/1759c7704efba1dd9192583adff5a211_131x68.png) **放上鼠标后**： ![](https://box.kancloud.cn/01de919befc92e744764aff28afc1890_132x68.png) >[danger] ##### 分析： >图片高为64，即一个图片的单个高度为32，所以设置一个67*32的盒子，这样初始的时候展示的是购物车，在设置鼠标 悬停后的图片位置，这样显示的就是登陆 ![](https://box.kancloud.cn/8266c86f0100bf43330c35a41b29475e_579x126.png) >[danger] ##### 代码 ~~~ <head> <title></title> </head> <style type="text/css"> a{ display: inline-block; background: url(110.png); width: 67px; height: 28px; } a:hover{ background: url(110.png) bottom; } </style> <body> <a href=""> </a> </body> </html> ~~~