Question

我正在实施星级评分系统，但它正在测试我对CSS选择器的了解限制。

目前我拥有它，以便每个星形都是一个提交按钮，当您将鼠标悬停在它上方时会突出显示该按钮。目前的问题是，我不知道如何改变之前恒星的视觉效果（所以当你徘徊在第三颗星之上时，它也突出了前两颗星。

以下是当前的实施：

HTML：

<div class="ratings>
  <form action="/blog/rate" class="ratings-form" method="post">
    <input id="rating_rating" name="rating[rating]" type="hidden" value="1">
    <input id="rating_post_id" name="rating[post_id]" type="hidden" value="3">
    <div id="rating-1" class="rating-star true"><input type="submit" value="★"></div>
  </form>
  <form action="/blog/rate" class="ratings-form" method="post">
    <input id="rating_rating" name="rating[rating]" type="hidden" value="2">
    ... (continued through 5) ...
</div>

CSS：

.rating-star > input[type="submit"] {
  padding: 0px 2px;
  float: left;
  color: #ccc;
  background: transparent;
  border:0 none;
  border-radius: 50px;
}

.rating-star > input[type="submit"]:hover {
  color: #faa;
}

由于我想要修改的元素是表单中的几个级别，似乎我不能使用~兄弟选择器。我错过了什么，或者我需要JavaScript来实现这种效果吗？

Answer 1

是的，这是可能的，但并不完全像你尝试的那样。您缺少的主要内容是您可以对type = submit的元素使用name属性。为了使这项工作按预期工作，我们还需要在HTML中以相反的顺序使星星运行，以便兄弟运算符正常工作。

form {
  width: 100px;
}

button {
  border: 0;
  background: transparent;
  font-size: 1.5em;
  margin: 0;
  padding: 0;
  float: right;
}

button:hover,
button:hover + button,
button:hover + button + button,
button:hover + button + button + button,
button:hover + button + button + button + button {
  color: #faa;
}

<form action="" method="POST">
  <input type="hidden" name="rating[post_id]" value="3">
  <button type="submit" name="rating[rating]" value="5">&#9733;</button>
  <button type="submit" name="rating[rating]" value="4">&#9733;</button>
  <button type="submit" name="rating[rating]" value="3">&#9733;</button>
  <button type="submit" name="rating[rating]" value="2">&#9733;</button>
  <button type="submit" name="rating[rating]" value="1">&#9733;</button>

</form>

没有JavaScript的点击提交的星级评分系统？

1 个答案: