Hide element on hover of another element

Question

I know it can be done in JavaScript, however I am looking for solution in CSS.

I have three divs.

• div#hide should be visible

Answer 1

Try something like this: "#main:hover + #show + #hide"

div#show {
    display:none;
}
#main:hover + #show {
    display:block 
}
#main:hover + #show + #hide {
    display:none
}

It's working for me.