html - 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; 
}