CSS hover效果牺牲背景图片大小的常规实现实例页面

回到相关文章 »

代码:

CSS代码:
.gr_forbg{padding:10px; background-color:#eee; text-align:right;}
.gr_mobile{display:inline-block; height:39px; line-height:300px; background:url(mobile-1.png) no-repeat; overflow:hidden; vertical-align:middle;}
.gr_iphone{width:91px;}
.gr_iphone:hover{background-position:0 -50px;}
.gr_android{width:101px; background-position:0 -100px;}
.gr_android:hover{background-position:0 -150px;}
.gr_vline{display:inline-block; width:2px; height:38px; margin-left:13px; margin-right:13px; background:url(vline.gif) center; vertical-align:middle;}
                
HTML代码:
<div class="gr_forbg">
    <a href="#" class="gr_mobile gr_iphone" title="iPhone下载">iPhone</a><!--
--><i class="gr_vline"></i><!--
--><a href="#" class="gr_mobile gr_android"  title="Android下载">Android</a>
</div
                

效果:

使用的背景图片是↓