Can pure CSS change other element on hover if its not child element?

Question

Does css include possibility to change other element on hover. Because I'm kinda struggling with simple task. For this example, I want form to appear when you hover <a> tag.

<a id="log" href="#">text</a>
      <form id="form" action="" method="post">
            <input type="text" name="id"/>
            <input type="submit" name="submit"/>  
      </form>

Should css look something like this:

#form{
    opacity:0;
}
#log:hover ~ #form {
    opacity: 1;
}

or:

#log:hover + #form {
    opacity: 1;
}

It really drives me crazy :/ Any suggestions how I could make it work? I don't want to use javaScript if there is other way.

Answer 1

#form {
  display: none;
}

#log:hover ~ #form {
  display:block;
}

#form:hover {
  display:block;
}

You'll need #form:hover so that the form doesn't disappear when you stop hovering the link, but this will not work if you're on a touch device. #log:active ~ #form may work on touch, can't confirm right now.

e.g: http://jsbin.com/etuxab/1/edit

Answer 2

Write it as -

#form{
    opacity:0;
    filter:alpha(opacity=0); /*For IE8*/
}

#log:hover ~ #form {
    opacity: 1;
    filter:alpha(opacity=100); /*For IE8*/
}

Working Demo