How can I create a hover effect for my radio buttons? Using !important isn't working. Is there a different way to achieve this effect on the radio input fields when hovering over them? You can view the complete example on jsfiddle at line 39.
If the 5th radio button is selected and you hover over the first one, the others should turn grey while the hovered one becomes orange.
/* Filled Rating */
.rating-fill{
width:0;
height:100%;
background:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS...')
position:absolute;
background-size: contain;
top:0;
left:0;
z-index:1;
}
/* Checked Inputs */
.radio-wrap input[value="5"]:checked + .rating-fill{
width:100%;
}
...