Как сделать, чтобы при наведении мыши на 2-ю звёздочку заработал hover
первой и второй звёзд?
body {
margin: 0;
padding: 0;
}
.stars {
display: flex;
justify-content: center;
}
.stars i:hover {
color: aqua;
cursor: pointer;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="stars">
<i class="fa fa-star fa-4x"></i>
<i class="fa fa-star fa-4x"></i>
<i class="fa fa-star fa-4x"></i>
<i class="fa fa-star fa-4x"></i>
<i class="fa fa-star fa-4x"></i>
</div>