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

删除#fast的第二次出现，因为~是一般的同级选择器：a ~ b匹配b当它是a的（后续）兄弟但#fast不是h1

的兄弟姐妹

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

Answer 2

是的，您可以，只需将~ #fast form替换为+ form

#fast form {
  color: gray;
}

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

Answer 3

你的目标是h1旁边的兄弟姐妹表格，所以你不再需要精确的父#fast：

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

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

3 个答案: