CSS hover效果的逆实现实例页面

回到相关文章 »

代码:

CSS代码:
.gr_forbg{padding:10px; background-color:#eee; text-align:right;}
.gr_mobile{display:inline-block; height:38px; line-height:300px; margin-right:0; background:url(mobile.png) no-repeat center; overflow:hidden; vertical-align:middle;}
.gr_mobile:hover{height:30px; margin-right:9px; }
.gr_iphone{width:91px; background-position:0 0;}
.gr_android{width:101px; margin-left:0; background-position:0 -50px;}
.gr_iphone:hover{width:74px; background-position:-8px -4px;}
.gr_android:hover{width:84px; margin-left:8px; background-position:-8px -54px;}
.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>
                

效果: