两个元素共享1像素:hover边框

Question

两个 inline-block 元素并排放置。

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

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

为了说明。

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

选择第一个元素。

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

选择第二个元素。

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

很容易通过将border-right或border-left设置为0来将2px边框减少到1px，但是当选择任一元素时如何保持1px共享边框呢？

不使用JavaScript。

- user479870

---

我们能看到@pdknsk的代码吗？我认为这可能是一个没有js支持会很有挑战性的问题。 - Jason Gennaro

Answer 1

您可以给它们一个-1像素的左边距，使其边框重叠，然后在第一个元素上撤消该边距。然后在鼠标悬停时调整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或其他伪类不起作用，则有几个其他选项：

• 将所有内容包裹在带有padding-left: 1px的<div>中，以规避margin-left: -1px。
• 为第一个元素添加额外的类，其中包含margin-left: 0。

- mu is too short

---

谢谢，使用 z-index 很好用。我直接在元素上设置了 margin-left:0。 - user479870

@pdknsk：在“style”属性中放置margin-left:0应该没问题，但我可能会选择添加一个额外的类，以便将所有CSS放在一起更容易维护。 - mu is too short

Answer 2

让:hover状态拥有2像素的边框，并在两侧给予-1像素的边距。对于:first-child和last-child做出例外，假设您不必关心每个浏览器...我在看你IE6/7

- Matijs