css - 分区 : collapse border + change the color of the border on hover + border radius?

Question

这个接缝很容易，但我还没有找到任何方法来做到这一点。我有 3 个 div(但解决方案必须适用于 n 个 div)，如下图所示:

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

例如:

我想要这样的普通 div :

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

最后，我不能做的，我想要像这里展示的那样的 Angular 落:

我想先折叠所有边框。使用 border-collapse:collapse 很容易。但是在我还想在悬停时更改整个单元格的边框颜色(顶部+左侧+底部+右侧边框)。边框也很容易:1px DOUBLE #000。但最后(我阻止了这一点)我还想要 div 1 的左上角和左下角以及 div 3 的右上角和右下角

它看起来像 border-collapse:collapse 他们没有圆 Angular ......所以需要找到另一个解决方案

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

Answer 1

实际上这比你想象的要复杂一些。

border-collapse 适用于表格而不适用于所有 block 元素。当然你仍然可以让它与 display:table/table-cell 一起工作。但是悬停仍然会有缺陷，因为折叠的边框将属于第一个元素 - 如果您将鼠标悬停在第二个或第三个元素上，左边框将不会改变。

只有到那时，折叠边框缺少边框半径才会发挥作用。

我会说你必须采用不同的方法。我可能会选择内联 block (或者可能更确切地说是使用“老式” float 以避免空白问题)元素，其边界重叠 1px 并更改 :hover 中的 z-index 以将悬停元素带到top 并确保其边框与显示的边框一致。