芒果小站

  1. 全球最具业界良心的主机 - DigitalOcean

    毫无疑问,目前做得最好的主机供应商

    猛击这里查看

  2. 芒果小站目前使用的主机 - DigitalOcean

    客服响应快,随时退款,XEN 架构稳定

    猛击这里查看

  3. 最好的日本东京线路主机 - DigitalOcean

    可选弗里蒙特、达拉斯、亚特兰大、纽瓦克、伦敦、东京机房

    猛击这里查看

  • 1
  • 2
  • 3
切换到精简模式
19

CSS 边框重叠鼠标悬停效果

作者 芒果/分类 代码/发布于 2010-08-26 23:11

前几天某个同事的项目中碰到一个边框重叠鼠标悬停效果,要实现鼠标移上后按钮边框换色,但左右两个按钮的边框又是合并在一起的。就像下面这张图片示意:

如果看不明白,请移步参考淘宝搜索结果页面中的“信用”、“价格”两个排序按钮。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://mangguo.org/mangguo-teach-you-clear-float

另外,芒果还想到一种形如九宫格的 CSS 实现,代码也很简洁。

详情参考这份 DEMO 稿:border_collapse_hover.html

版权所有,转载请注明出处。
转载自 <a href="http://mangguo.org/css-border-collapse-hover-effect/" title="CSS 边框重叠鼠标悬停效果" rel="bookmark">CSS 边框重叠鼠标悬停效果 | 芒果小站</a>
如果喜欢这篇文章,欢迎订阅芒果小站以获得最新内容。

已经有 19 条群众意见

  1. 书香阁免费网 /2010-08-27 03:56

    SF 我的了哈哈。。。 回应

    #1
  2. 9099淘宝 /2010-08-27 10:13

    上面这个帖子写的不错啊,顶一个。 回应

    #2
  3. SIMPLE /2010-08-27 17:23

    不错的,学习了。 回应

    #3
  4. Kars /2010-08-27 20:14

    http://mangguo.org/mangguo-teach-you-clear-float 的链接 没做好? 回应

    #4
  5. 芒果Kars/2010-08-28 02:13

    谢谢提醒,已经修正。 回应

    #5
  6. 文龙心 /2010-08-28 15:30

    不错,学习了。 回应

    #6
  7. 文龙心 /2010-08-28 15:34

    刚才改了图片,看看效果。 回应

    #7
  8. lzg01 /2010-08-29 14:08

    恩,学习了,谢谢分享了。 回应

    #8
  9. 企业网站建设 /2010-08-29 18:28

    好功能。不错。 回应

    #9
  10. 哲哲 /2010-08-30 08:46

    留着以后有用。 回应

    #10
  11. nfl authentic /2010-08-31 09:39

    挺好的文章,学习了。 回应

    #11
  12. 肾虚怎么办 /2010-08-31 12:17

    确实是不错~~~~~~ 回应

    #12
  13. 最有效的减肥药 /2010-08-31 12:24

    WP 应该出个插件,屏蔽下垃圾评论,博主的博客还好点,我的博客,整天都是垃圾评论,删除的手软啊。 回应

    #13
  14. woiweb /2010-09-01 20:34

    挺有意思的,以后肯定有的用。 回应

    #14
  15. CAYO /2010-09-02 17:26

    我是来测试邮件的。 回应

    #15
  16. CAYO /2010-09-02 17:27

    !!!! 回应

    #16
  17. ?
    边框重叠悬停效果 - 数据力量 /2010-09-04 04:20

    […] 【来源】芒果 – CSS 边框重叠鼠标悬停效果 【整理】horan@数据力量 – 边框重叠悬停效果 […] 回应

    #17
  18. 百奥博 /2010-09-21 22:26

    越来越 web2.0 了。 回应

    #18
  19. ?
    求助啊,横向导航条 - web前端 - 开发者问答 /2013-05-20 11:32

    […] 回复: http://mangguo.org/css-border-collapse-hover-effect/ […] 回应

    #19

下面我简单说几句