how to prevent div_2 positioning being effected by div_1's hover state?

Question

i have a div (div_1) which when hovered over has it's background image and size replaced by css hover state.

the problem is that the positioning of a div (div_2) 'below' this one is then effected when hovering over div_1 because its position is relative.

before i change div_2's position to absolute in order to prevent this from happening, i was wondering if there was any way to prevent div_1's hover state effecting div_2 without resorting to changing div_2's position to absolute?

thank you.

Answer 1

update/solution: from https://stackoverflow.com/a/4502693/1063287

you can control the positioning of 'div_2' when hovering over 'div_1' with this:

#div_1:hover + #div_2 {
    top: -100px !important;
}

note this particular solution works where div_2 is not a child of div_1, solutions for other scenarios (within the same div, directly after the parent div or otherwise) can be found at the above link.