如果CSS不是子元素，纯CSS是否可以改变悬停的其他元素？

Question

css是否包含更改hover上的其他元素的可能性。因为我有点挣扎于简单的任务。对于这个例子，我想当你悬停<a> tag时出现form。

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

应该CSS是这个样子：

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

或：

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

这真的让我发疯：/任何建议，我怎么可能使它工作吗？如果有其他方法，我不想使用javaScript。

Answer 1

把它写成 -

#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; 
} 

你需要#form:hover这样，当你停止徘徊链接的形式不会消失，但是这不会，如果你的工作'在触摸设备上。 #log:active ~ #form可以联系工作，目前无法确认。

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