CSS hover效果clip:rect的常规实现实例页面

CSS代码：

.gr_forbg{padding:10px; background-color:#eee; text-align:right;}
.gr_mobile{height:38px; line-height:300px; background:url(mobile.png) no-repeat; overflow:hidden; position:absolute;}
.gr_iphone{width:91px; margin-left:-104px; clip:rect(3px 88px 36px 4px);}
.gr_android{width:101px; margin-left:-101px; clip:rect(3px 98px 36px 4px); background-position:0 -50px;}
.gr_mobile:hover{clip:rect(0 101px 38px 0); border:0;}
.gr_vline{display:inline-block; width:2px; height:38px; margin-right:114px; background:url(vline.gif) center; vertical-align:middle;}
                

HTML代码：

<div class="gr_forbg">
    &nbsp;<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