div：折叠边框+更改悬停时边框的颜色+边框半径？答案

【问题标题】：div: collapse border + change the color of the border on hover + border radius?div：折叠边框+更改悬停时边框的颜色+边框半径？
【发布时间】：2015-01-27 21:45:01
【问题描述】：

这个接缝很容易，但我还没有找到任何方法来做到这一点。我有 3 个 div（但解决方案必须适用于 n 个 div），如下面的架构：

|分区 1 ||分区 2 ||第 3 部分 |

例如：

我想要这样的普通 div：

在一个特定的 div 悬停时，我希望这个 div 的所有边框都具有像这样的另一种颜色：

最后，我不能做的是，我想要这里展示的角落：

我想先折叠所有边框。使用边框折叠：折叠很容易。但是在我还想更改悬停时整个单元格的边框颜色（上+左+下+右边框）之后。使用边框也很容易：1px DOUBLE #000。但最后（我在这一点上阻止）我还想要在 div 1 的左上角和左下角以及 div 3 的右上角和右下角有一个圆角

看起来像border-collapse:collapse 他们是不可能有圆角的......所以需要找到另一个解决方案

编辑：我尝试使用相对位置和 z-index，效果更好！但是我需要知道如何将第 2 个 div 向左移动 1px，将第 3 个 div 向左移动 2 个像素，...以及将第 n 个 div 向左移动 n-1 个像素？

【问题讨论】：

您是否有一张图片可以提示我们您希望在哪些活动中实现目标？您是否尝试过使用在悬停时更改 src 的图像？您希望 div 的数量有多动态？
我只是用图片编辑问题，如果它可以帮助你..

标签： css

【解决方案1】：

其实这比你想象的要复杂一点。

border-collapse 适用于并非所有块元素的表格。当然，您仍然可以使其与 display:table/table-cell 一起使用。但是悬停仍然存在缺陷，因为折叠的边框将属于第一个元素 - 如果悬停第二个或第三个元素，左边框不会改变。

只有这样，折叠边框的边框半径不足才会发挥作用。

我会说你必须采用不同的方法。我可能会选择 inline-block （或者更确切地说是使用“老式”浮动来避免空白问题）元素，其边框重叠 1px 并更改 :hover 中的 z-index 以将悬停的元素带到顶部并确保它的边框是显示的。

【讨论】：

“实际上这比你想象的要复杂一些” => 哦，是的！ “边框折叠适用于表格，并非适用于所有块元素。当然，您仍然可以使其与 display:table/table-cell 一起使用。但是悬停仍然存在缺陷，因为折叠的边框将属于第一个元素 - 如果你将左边框悬停在第二个或第三个元素不会改变。” ==> 没有边框：双倍 1px 它适用于所有单元格
"边框重叠 1px" .. 我已经尝试过了，这个工作很好，除了悬停我不能改变所有边框的颜色，因为一个总是被另一个元素重叠:(
@loki 为悬停的项目添加正 z-index。
@loki 我实际上尝试了边框双重技巧......但无法让它工作，左边框在悬停时不会改变（第一个元素除外）。
不，我尝试了双重技巧，效果很好。 .cont {display:inline-table;border-collapse:collapse;} .div {display:table-cell;box-sizing:border-box;border:1px solid #dedede;} .div:hover {border:1px double #7CCBDE;} 工作正常！

【解决方案2】：

不是很清楚你想要什么，只是尝试一下

.one {
    width: 80px;
    height: 40px;
    display: table-cell;
    border-collapse: collapse;
    border: double 1px black;
}
.one:first-child {
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}
.one:last-child {
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}

<div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
</div>

【讨论】：

在您的示例中，边框实际上并没有折叠。您需要一个表格元素来禁用边框半径。

【解决方案3】：

这是你想要的吗？

.container {
  display: table;
}
.container > div {
  display: table-cell;
  width: 80px;
  height: 40px;
  text-align: center;
  vertical-align: middle;
  border-top: solid 1px gray;
  border-bottom: solid 1px gray;
  border-left: solid 1px gray;
}
.container > div:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}
.container > div:last-child {
  border-right: solid 1px gray;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}
.container > div:hover {
  background-color: lightgray;
  border-color: red;
  border-right: solid 1px red;
}

<div class='container'>
  <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div>
</div>

【讨论】：

类似的东西，但在这里它不起作用:(因为在这里悬停时边框不会折叠（红色在黑色边框旁边）。

【解决方案4】：

这是解决这两个问题的解决方案：

将外侧环绕。这使用了first-of-type 和last-of-type 以及border-radius 属性。
与边界重叠。

对于后者，不是使用 z 索引，而是创建了右边框并更改了颜色。然后，下一个li 的左边框被空白。通过使用相邻的兄弟选择器 (+) 来清除下一个 li。

这是一个 Codepen：http://codepen.io/anon/pen/JoyGxJ

【讨论】：