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

Question

Does css include the ability to change another element to hover . Because I'm struggling a bit with a simple task. In this example, I want the form appear when you hover the <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> 

If css looks 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 can I make it work? I do not want to use javaScript if there is another way.

Answer 1

Write it like -

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

Working demo

Answer 2

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

You will need #form:hover so that the form does not disappear when you stop linking, but this will not work if you are on a touch device. #log:active ~ #form can work by touch, cannot confirm right now.

for example: http://jsbin.com/etuxab/1/edit