如果不是子元素，则纯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>

CS应该看起来像这样：

#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

Answer 2

将其写成 -

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

工作演示