CSS 边框重叠鼠标悬停结果

前几天某个同事的项目中遇到一个边框重叠鼠标悬停结果，要实现鼠标移上后按钮边框换色，但阁下两个按钮的边框又是归并在一路的。就像下面这张图片表示：

假如看不大白，请移步参考淘宝搜刮功效页面中的“名誉”、“价值”两个排序按钮。http://s.taobao.com/search?q=%CC%D4%B1%A6

以三个横排并列的按钮为例：

这个题目的要害在于归并相邻两个容器的边框，视觉上就像表格边框的归并那样，芒果选择行使负 margin 来潜匿右侧边框。鼠标 hover 时怎样才气使当前按钮边框泛起出来？着实也很简朴，只要给 a:hover 伪类加上 position:relative;z-index:1; 即可。其它，为了修复 IE6 下的定位题目，提议给每一个 a 元素添加 position:relative; 属性。样式代码如下：

最终结果如下。由于子节点浮动，外层最好能破除浮动，清浮动的要领请猛击此处查察：http://www.mangguo.org/mangguo-teach-you-clear-float

其它，芒果还想到一种形如九宫格的 CSS 实现，代码也很简捷。

详情参考：DEMO

出处：http://www.mangguo.org

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!