在没有 JavaScript 的情况下点击提交的星级评分系统？

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 的情况下点击提交的星级评分系统？

Star rating system that submits on click without JavaScript?

html

css

rating-system