Увидел гугл рейтинг и захотел поставить себе на сайт. Но возникла проблема. У меня не получается сделать так, чтобы при наведении на i.icon-star звездочки ДО неё загорались.
Если делать просто .icon-star:nth-child(-n+4), то все ок, но не при наведении.
$(document).ready(function() {
$('.bar span').hide();
$('#bar-five').animate({
width: '75%'}, 1000);
$('#bar-four').animate({
width: '35%'}, 1000);
$('#bar-three').animate({
width: '20%'}, 1000);
$('#bar-two').animate({
width: '15%'}, 1000);
$('#bar-one').animate({
width: '30%'}, 1000);
setTimeout(function() {
$('.bar span').fadeIn('slow');
}, 1000);
});
@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,400);
@import url(https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
body {
font-family: 'Roboto', Helvetica;
color: #737373;
font-weight: 300; }
.container {
width: 400px;
margin: 0 auto;
margin-top: 3em;
background-color: #EFEFEF;
padding: 4px; }
.inner {
padding: 1em;
background-color: white;
overflow: hidden;
position: relative;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px; }
.rating {
float: left;
width: 45%;
margin-right: 5%;
text-align: center; }
.rating-num {
color: #333333;
font-size: 72px;
font-weight: 100;
line-height: 1em; }
.rating-stars {
font-size: 20px;
color: #E3E3E3;
margin-bottom: .5em; }
.rating-stars > span.active {
color: #737373; }
.rating-stars > .icon-star:hover {
cursor: pointer;
color: #ffc107; }
.rating-stars > .icon-star:hover:nth-child(-n+1) {
cursor: pointer;
color: #ffc107; }
.rating-stars > .icon-star:hover:nth-child(-n+2) {
cursor: pointer;
color: #ffc107; }
.rating-stars > .icon-star:hover:nth-child(-n+3) {
cursor: pointer;
color: #ffc107; }
.rating-stars > .icon-star:hover:nth-child(-n+4) {
cursor: pointer;
color: #ffc107; }
.rating-stars > .icon-star:hover:nth-child(-n+5) {
cursor: pointer;
color: #ffc107; }
.rating-users {
font-size: 14px; }
.histo {
float: left;
width: 50%;
font-size: 13px; }
.histo-star {
float: left;
padding: 3px; }
.histo-rate {
width: 100%;
display: block;
clear: both; }
.bar-block {
margin-left: 5px;
color: black;
display: block;
float: left;
width: 75%;
position: relative; }
.bar {
padding: 4px;
display: block; }
#bar-five {
width: 0;
background-color: #9FC05A; }
#bar-four {
width: 0;
background-color: #ADD633; }
#bar-three {
width: 0;
background-color: #FFD834; }
#bar-two {
width: 0;
background-color: #FFB234; }
#bar-one {
width: 0;
background-color: #FF8B5A; }
/*# sourceMappingURL=rating.css.map */
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="inner">
<div class="rating">
<span class="rating-num">4.0</span>
<div class="rating-stars">
<i class="icon-star"></i>
<i class="icon-star"></i>
<i class="icon-star"></i>
<i class="icon-star"></i>
<i class="icon-star"></i>
</div>
<div class="rating-users">
<i class="icon-user"></i> 1,014,004 total
</div>
</div>
<div class="histo">
<div class="five histo-rate">
<span class="histo-star">
<i class="active icon-star"></i> 5
</span>
<span class="bar-block">
<span id="bar-five" class="bar">
<span>566,784</span>
</span>
</span>
</div>
<div class="four histo-rate">
<span class="histo-star">
<i class="active icon-star"></i> 4
</span>
<span class="bar-block">
<span id="bar-four" class="bar">
<span>171,298</span>
</span>
</span>
</div>
<div class="three histo-rate">
<span class="histo-star">
<i class="active icon-star"></i> 3
</span>
<span class="bar-block">
<span id="bar-three" class="bar">
<span>94,940</span>
</span>
</span>
</div>
<div class="two histo-rate">
<span class="histo-star">
<i class="active icon-star"></i> 2
</span>
<span class="bar-block">
<span id="bar-two" class="bar">
<span>44,525</span>
</span>
</span>
</div>
<div class="one histo-rate">
<span class="histo-star">
<i class="active icon-star"></i> 1
</span>
<span class="bar-block">
<span id="bar-one" class="bar">
<span>136,457</span>
</span>
</span>
</div>
</div>
</div>