CSS hover效果牺牲一层标签的常规实现实例页面

回到相关文章 »

代码:

CSS代码:
.gr_forbg{padding:10px; background-color:#eee; text-align:right;}
.gr_mobile{display:inline-block; height:38px; background:url(mobile.png) no-repeat; vertical-align:middle;}
.gr_inner{display:block; height:30px; line-height:300px; border:4px solid #eee; cursor:pointer; overflow:hidden;}
.gr_mobile:hover, .gr_mobile:hover .gr_inner{border:0;}
.gr_iphone{width:91px;}
.gr_android{width:101px; background-position:0 -50px;}
.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下载"><span class="gr_inner">iPhone</span></a><!--
--><i class="gr_vline"></i><!--
--><a href="#" class="gr_mobile gr_android"  title="Android下载"><span class="gr_inner">Android</span></a>
</div
                

效果:

使用的背景图片是↓