1px 共享：将边框悬停在两个元素上

发布于 2024-12-07 20:31:29 字数 628 浏览 0 评论 0原文

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

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

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

举例说明。

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

选择第一个元素。

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

选择第二个元素。

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

通过将 border-right 或 border-left 设置为 ，可以轻松地将 2px 边框减少到 1px >0，但是当选择任一元素时如何保持 1px 共享边框呢？

没有 JavaScript。

原文

Two inline-block elements next to each other.

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

What I'd like is to reduce the 1px+1px border between them to a shared 1px border.

To illustrate.

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

Select first element.

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

Select second element.

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

It's simple to reduce the 2px border to 1px by setting either border-right or border-left to 0, but how to keep the 1px shared border when either element is selected?

Without JavaScript.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

盗梦空间 2024-12-14 20:31:29

您可以给它们一个 -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/ambigously/XTzqx/

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

将其全部包装在
中，并使用 padding-left： 1px 围绕 margin-left: -1px 进行拼凑。
向第一个具有 margin-left: 0 的类添加一个额外的类。

You could give them a -1px left margin to get their borders overlapping and then undo that margin on the first one. Then adjust the z-index on hover (and don't forget position: relative to make the z-index work). Something like this:

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

Demo: http://jsfiddle.net/ambiguous/XTzqx/

You might need to play with the :first-child a bit depending on how your HTML is structured; a couple other options if :first-child or another pseudo-class won't work:

Wrap it all in a <div> with padding-left: 1px to kludge around the margin-left: -1px .
Add an extra class to the first one that has margin-left: 0.

回复收藏 0 原文