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

You just have to replace the + selector with ~ cause the #hide is not placed after #main

So your code is:

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