使用CSS将鼠标悬停在h1后更改表单样式？

Question

是否有可能在仅使用css3悬停在h1上时更改表单样式？

代码如下:

<div id="fast">
  <h1>headline</h1>
  <br>
  <form method="post">
    <input type="hidden" nam="fast_s" value="true">
    <div>
      <h2>change this</h2>
    </div>
  </form>
</div>

css文件:

#fast form {
  color: gray;
}
#fast h1:hover ~ #fast form {
  color: red;
}

Codepen:http://codepen.io/anon/pen/qEogpB

Answer 1

#fast h1:hover ~ form {
  color: red;
}

除去的第二occurence #fast因为~是一般的兄弟选择:a ~ b匹配b时它是一个(随后的)兄弟a但#fast不是的同级h1

http://codepen.io/anon/pen/azYXQo