Question

两个inline-block元素彼此相邻。

.e{border:1px #ccc solid}
.e:hover{border-color:#555}

我希望将它们之间的1px + 1px边框缩小为共享的1px边框。

举例说明。

---------
|   |   |
---------

选择第一个元素。

+++++-----
+   +    |
+++++-----

选择第二个元素。

-----+++++
|    +   +
-----+++++

通过将2px或1px设置为border-right，将border-left边框缩小为0很简单，但如何保留1px选择任一元素时共享边框？

没有JavaScript。

Answer 1

你可以给它们一个-1px的左边距以使它们的边界重叠，然后在第一个上撤消该边距。然后在悬停时调整z-index（不要忘记position: relative以使z-index正常工作。像这样：

.e {
    border: 1px #ccc solid;
    position: relative;
    margin-left: -1px;
}
.e:first-child {
    margin-left: 0;
}
.e:hover {
    border-color: #555;
    z-index: 5;
}

演示：http://jsfiddle.net/ambiguous/XTzqx/

根据HTML的结构，您可能需要稍微使用:first-child;如果:first-child或其他伪类不起作用，还有其他几个选项：

用<div> padding-left: 1px将所有内容全部包裹在margin-left: -1px周围。
在第一个有margin-left: 0。

Answer 2

使:hover状态具有2px边框，并在两边都给它-1px margin。为:first-child和last-child设置例外情况，假设您不必关心那里的每个浏览器...我在看着你IE6 / 7

1px shared：悬停在两个元素上的边框

2 个答案: