Question

Take a look at this fiddle – I’ve got three divs which all have a border-width of 2px. The original problem was because each div has a border-width of 2px, the border gets duplicated in between each div, giving a total border-width of 4px. I fixed this by adding a margin-top of -2px on every div. This causes the divs to cover up the border of the one above, achieving what looks like even borders all round.

I wanted to add a hover effect to my divs, so I added the following CSS:

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

The trouble is, because the borders of the top two are covered up by the divs below them, the hover effect doesn’t look right (the bottom border of each div doesn’t appear to get highlighted).

I want to be able to have a 2px border only between each div, whilst having a hover effect for the entire border of that div… how can I do this?

Answer 1

You can add another selector that colors the top border of the next div when a div is hovered:

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