/* 336x280*/
前几天某个同事的项目中碰到一个边框重叠鼠标悬停效果，要实现鼠标移上后按钮边框换色，但左右两个按钮的边框又是合并在一起的。就像下面这张图片示意：
如果看不明白，请移步参考淘宝搜索结果页面中的“信用”、“价格”两个排序按钮。http://s.taobao.com/search?q=%CC%D4%B1%A6
以三个横排并列的按钮为例：
<span class="grid">
<a href="#">A</a>
<a href="#">B</a>
<a href="#">C</a>
</span>
这个问题的关键在于合并相邻两个容器的边框，视觉上就像表格边框的合并那样，芒果选择使用负 margin 来隐藏右侧边框。鼠标 hover 时如何才能使当前按钮边框呈现出来？其实也很简单，只要给 a:hover 伪类加上 position:relative;z-index:1; 即可。另外，为了修复 IE6 下的定位问题，建议给每一个 a 元素添加 position:relative; 属性。样式代码如下：
.grid{display:inline-block;}
.grid a{float:left;border:5px solid #cdcdcd;margin-right:-5px;position:relative;width:50px;height:50px;line-height:50px;text-align:center;}
.grid a:hover{border:5px solid #31b1fc;position:relative;z-index:1;}
最终效果如下。因为子节点浮动，外层最好能清除浮动，清浮动的方法请猛击此处查看：http://www.mangguo.org/mangguo-teach-you-clear-float
另外，芒果还想到一种形如九宫格的 CSS 实现，代码也很简洁。
详情参考这份 DEMO 稿：border_collapse_hover.html
/* 336x280*/
版权所有，转载请注明出处。
转载自 <a href="http://www.mangguo.org/css-border-collapse-hover-effect/" title="CSS 边框重叠鼠标悬停效果" rel="bookmark">CSS 边框重叠鼠标悬停效果 | 芒果小站</a>
已经有 18 条群众意见
- 书香阁免费网
#1/2010-08-27 03:56SF 我的了哈哈。。。 回应
- 9099淘宝
#2/2010-08-27 10:13上面这个帖子写的不错啊，顶一个。 回应
- SIMPLE
#3/2010-08-27 17:23不错的，学习了。 回应
- Kars
#4/2010-08-27 20:14http://www.mangguo.org/mangguo-teach-you-clear-float 的链接 没做好？ 回应
- 芒果 对 说
#5/2010-08-28 02:13谢谢提醒，已经修正。 回应
- 文龙心
#6/2010-08-28 15:30不错，学习了。 回应
- 文龙心
#7/2010-08-28 15:34刚才改了图片，看看效果。 回应
- lzg01
#8/2010-08-29 14:08恩，学习了，谢谢分享了。 回应
- 企业网站建设
#9/2010-08-29 18:28好功能。不错。 回应
- 哲哲
#10/2010-08-30 08:46留着以后有用。 回应
- nfl authentic
#11/2010-08-31 09:39挺好的文章，学习了。 回应
- 肾虚怎么办
#12/2010-08-31 12:17确实是不错～～～～～～ 回应
- 最有效的减肥药
#13/2010-08-31 12:24WP 应该出个插件，屏蔽下垃圾评论，博主的博客还好点，我的博客，整天都是垃圾评论，删除的手软啊。 回应
- woiweb
#14/2010-09-01 20:34挺有意思的，以后肯定有的用。 回应
- CAYO
#15/2010-09-02 17:26我是来测试邮件的。 回应
- CAYO
#16/2010-09-02 17:27!!!! 回应
- 边框重叠悬停效果 - 数据力量
#17/2010-09-04 04:20[...] 【来源】芒果 – CSS 边框重叠鼠标悬停效果 【整理】horan@数据力量 – 边框重叠悬停效果 [...] 回应
- 百奥博
#18/2010-09-21 22:26越来越 web2.0 了。 回应
我简单说几句