css - 1px 共享 :hover border on two elements

Question

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

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

我想要的是将它们之间的 1px+1px 边框缩小为共享的 1px 边框。

举例说明。

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

选择第一个元素。

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

选择第二个元素。

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

通过设置 border-right 或 border-left 将 2px 边框缩小到 1px 很简单到 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/

您可能需要使用 :first-child有点取决于您的 HTML 的结构；如果:first-child还有其他几个选项或者另一个伪类将不起作用:

• 将其全部包装在 <div> 中与 padding-left: 1px在margin-left: -1px周围拼凑.
• 向第一个具有 margin-left: 0 的类添加一个额外的类.