CSS避免邊框重複，同時保持邊框的可見性

Question

看看this fiddle - 我有三個div，所有的border-width均爲2px。最初的問題是因爲每個div的邊框寬度都是2px，所以邊框在每個div之間都會被重複，總的邊框寬度爲4px。我通過在每個div上添加-2px的margin-top來解決此問題。這導致divs掩蓋了上面的邊界，實現了甚至是全面的邊界。

我想懸停效果添加到我的div，所以我增加了以下CSS：

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

麻煩的是，因爲前兩名的邊界是由它們下面的的div掩蓋懸停效果看起來不正確（每個div的下邊框看起來並不突出顯示）。

我希望能夠在每個div之間只有2px邊框，同時對該div的整個邊框有一個懸停效果......我該怎麼做？

Answer 1

您可以添加另一個選擇器，顏色下一格的上邊框當一個div懸停：

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