html - 如果不是子元素，纯 CSS 可以在悬停时更改其他元素吗？

Question

css 是否包含更改 hover 上其他元素的可能性？ .因为我有点在为简单的任务而苦苦挣扎。对于这个例子，我想要 form当您悬停 <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>

css 应该是这样的:

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

或:

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

这真的让我发疯:/有什么建议可以让它发挥作用吗？如果有其他方法，我不想使用 javaScript。

Answer 1

#form {
  display: none;
}

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

#form:hover {
  display:block;
}

您需要 #form:hover 以便当您停止悬停链接时表单不会消失，但如果您使用的是触摸设备，则此方法无效。 #log:active ~ #form 可以在触摸时工作，现在无法确认。

例如:http://jsbin.com/etuxab/1/edit