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've to use tilda '~' for this case.

The difference between + and ~ is that ~ matches all following siblings regardless of their proximity from the first element, as long as they both share the same parent.

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