How do I change background image on stars? - html

Question

I am trying to do a css hover effect.
I want the previous stars to also change their background image as the stars are hovered.
I have tried some different things but can't seem to understand the CSS that has to be used. Can anybody guide me?
I have the rating project 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

You need to do like this, where you put the input outside the label, or else they will not "see" the label(s), and then, with the flexbox order property, you swap them in markup so you can make use of the sibling selector ~.
.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>

Answer 2

At the end of your styles, you have this:
.parent label:hover,
.parent label:hover ~ label {
background-image: url(../img/voteFull.png);
}
Change that to this one:
label:hover,
label:hover ~ label {
background-image: url(../img/voteFull.png);
}