html - 如何更改星星的背景图片？

Question

我正在尝试做一个 css 悬停效果。我希望前面的星星在悬停时也改变它们的背景图像。

我尝试了一些不同的东西，但似乎无法理解必须使用的 CSS。谁能指导我？

我有评级元素here

HTML

<form action="" method="post" class="absolute babesRate flex">
    <label>
        <input type="radio" name="vote" value="1" id="vote1">
    </label>
    <label>
        <input type="radio" name="vote" value="2" id="vote2">
    </label>
    <label>
        <input type="radio" name="vote" value="3" id="vote3">
    </label>
    <label>
        <input type="radio" name="vote" value="4" id="vote4">
    </label>
    <label>
        <input type="radio" name="vote" value="5" id="vote5">
    </label>
</form>

CSS

label{
    background-image: url(../img/voteEmpty.png);
    background-repeat: no-repeat;
    width: 40px;
    height: 40px;
}
label+input[type="radio"]:checked{
    background-image: url(../img/voteFull.png);
}
label:hover{
    background-image: url(../img/voteFull.png);
}

Answer 1

你需要这样做，将 input 放在 label 之外，否则他们将不会“看到”标签，然后，使用 flexbox order 属性，您可以在标记中交换它们，这样您就可以使用兄弟选择器 ~。

.flex {
  display: flex;
}
label {
  display: inline-block;
  background: gray url(../img/voteEmpty.png);
  background-repeat: no-repeat;
  width: 40px;
  height: 40px;
  margin: 2px;
}
input[type=radio] {
  display: none
}
label:nth-of-type(1) { order: 5; }
label:nth-of-type(2) { order: 4; }
label:nth-of-type(3) { order: 3; }
label:nth-of-type(4) { order: 2; }
label:nth-of-type(5) { order: 1; }

input:checked ~ label {
  background: red url(../img/voteFull.png);
}
form:hover label {
  background: gray url(../img/voteEmpty.png); 
}
form label:hover,
label:hover ~ label {
  background: red url(../img/voteFull.png);
}

<form action="" method="post" class="absolute babesRate flex">
  <input type="radio" name="vote" value="5" id="vote5">
  <label for="vote5">5</label>
  <input type="radio" name="vote" value="4" id="vote4">
  <label for="vote4">4</label>
  <input type="radio" name="vote" value="3" id="vote3">
  <label for="vote3">3</label>
  <input type="radio" name="vote" value="2" id="vote2">
  <label for="vote2">2</label>
  <input type="radio" name="vote" value="1" id="vote1">
  <label for="vote1">1</label>
</form>