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

Question

看看this fiddle - 我有三个div，其中border-width为2px。最初的问题是因为每个div的边框宽度为2px，边框在每个div之间重复，总边界宽度为4px。我通过在每个div上添加margin-top -2px来修复此问题。这会导致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; 
}