CSS 避免边框重复，同时保持边框可见性

Question

看看this fiddle - 我有三个div，它们的border-width 均为2px。最初的问题是因为每个 div 的边框宽度为 2px，边框在每个 div 之间重复，总边框宽度为 4px。我通过在每个 div 上添加 -2px 的 margin-top 来解决此问题。这会导致 div 覆盖上一个的边框，从而实现看起来均匀的边框。

我想为我的 div 添加悬停效果，所以我添加了以下 CSS：

#main div:hover {
    border-color:#09C;
}

问题是，因为顶部两个的边框被下面的 div 覆盖，悬停效果看起来不正确（每个 div 的底部边框似乎没有突出显示）。

我希望能够在每个 div 之间仅具有 2px 边框，同时对该 div 的整个边框具有悬停效果...我该怎么做？

Answer 1

您可以添加另一个选择器，在 div 悬停时为下一个 div 的上边框着色：

#main div:hover + div {
    border-top-color:#09C; 
}