[代码] 合并边框的格子效果

本文阐述了如何实现合并边框的格子效果。其中,每个格子的四个边框在 hover 状态下都同时变色。 赛事导航
图1 效果图 每个相邻的格子都共享边框。且编号 8 的格子是鼠标放在格子上的效果,四周的边框都变成了绿色

border-collapse CSS 属性

表格的 border-collapse 属性使格子的边框合并。

table { border-collapse:collapse;}

position:relative 和 position:absolute CSS 属性

给每个格子加上 position:relative 属性,格子内的数字做成链接,并给链接加上 position:absolute 属性,使得 a 标签相对于格子是绝对定位。

如果直接把 position:relative; 加在 td 上,结果是 a 标签不会相对于单元格而是相对于表格绝对定位,这是 FireFox 也存在的 bug 。所以在 td 内再加一个 div 层,把 position:relative; 加在 div 上。

td div {position:relative;}

td div a:hover{ position:absolute; }

height:100%; 和 width:100%;

为了 a 标签相对于 div 的绝对定位和期望的相对于 td 的绝对定位效果一样,div 应该和 td 宽高相同,所以:

td div {width:100%; height:100%;}

定宽高

上面将 div 的宽度和高度都设为了 td 的 100% ,这种效果只有当 td 是定宽定高才能实现,所以:

td { width:30px; height:30px; }

display:block;

当鼠标放在格子里时,我们是给 a 标签加的背景和边框。所以这里的 a 应该和 div 一样可以定宽定高:

td div a{ display:block;}

left:-1px; top: -1px; 和 overflow:visible;

本文重点是每个格子的四个共享边框同时变色。每个格子对应哪些共享边框的概念,在 HTML 和 CSS 中都似乎没有。直接给 td 的 border 变色的话,会变色的只有右下两条边框(DEMO)。所以选择用 a 的边框盖在外层 td 边框的上面,就好像 td 的边框变色了一样:

td div { overflow:visible; }

td div a:hover{ left:-1px; top: -1px; }

样式美化

还要给 table 和 td 和 a:hover 加上 border 颜色和粗细,a:hover 应该用 CSS3 和 IE 滤镜加上渐变。此外,a 的宽高应该比 td 大一些等等。

完整代码

table { border-collapse:collapse; border:1px;}

td { border: solid 1px #eee; text-align:center;

width:30px; height:30px; }

td div {position:relative; width:100%; height:100%;

overflow:visible; line-height:30px;}

td div a, td div a:visited{ display:block;}

td div a:hover{ position:absolute; left:-1px; top: -1px;

border:solid 1px #0F0; width:32px; height:30px; 

color:#FFFFFF; background:#006633;}










































































1111111111111111
1

DEMO

td:hover 无法完全实现变色 - https://www.bokeyy.com/wp-content/uploads/2011/11/table-test-tdhover.html
最终DEMO - https://www.bokeyy.com/wp-content/uploads/2011/11/table-test.html @guoaimin @JD