1px 共享：悬停在两个元素上的边框答案

【问题标题】：1px shared :hover border on two elements1px 共享：悬停在两个元素上的边框
【发布时间】：2011-11-29 02:55:28
【问题描述】：

两个相邻的inline-block 元素。

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

我想要将它们之间的1px+1px 边界减少为共享的1px 边界。

为了说明。

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

选择第一个元素。

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

选择第二个元素。

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

通过设置border-left或@ 487654333 @或0，但是在选择任一元素时，如何保留1px / p. p >

没有 JavaScript。

【问题讨论】：

我们可以看到代码@pdknsk 吗？我认为这可能是一个没有 js 的挑战。

标签： css hover border

【解决方案1】：

使:hover 状态有一个2px 的边框，并在两边赋予-1px margin。 :first-child 和 last-child 例外，假设你不必关心那里的每一个浏览器……我在看你 IE6/7

【讨论】：

【解决方案2】：

您可以给它们一个 -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 或其他伪类不起作用，还有其他几个选项：

用padding-left: 1px 将其全部封装在<div> 中，以便在margin-left: -1px 周围混搭。
为第一个具有margin-left: 0 的类添加一个额外的类。

【讨论】：

谢谢，使用z-index 效果很好。我直接在元素上设置了margin-left:0。
@pdknsk：将margin-left:0 放在style 属性中应该没问题，不过我可能会使用一个额外的类来将所有CSS 放在一起以便于维护。