1

Увидел гугл рейтинг и захотел поставить себе на сайт. Но возникла проблема. У меня не получается сделать так, чтобы при наведении на 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>&nbsp;
                                                            </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>&nbsp;
                                                            </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>&nbsp;
                                                            </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>&nbsp;
                                                            </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>&nbsp;
                                                            </span>
                                                        </span>
                                                </div>
                                            </div>
                                        </div>

2 ответа 2

1

Хм. В вашем коде именно так и работает - при наведении на любую конкретную звездочку, все звездочки ДО нее НЕ загораются.

Или вам наоборот надо?

@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);
.rating-num {
  color: #333333;
  font-size: 72px;
  font-weight: 100;
  line-height: 1em;
}

.rating-stars {
  font-size: 20px;
  color: #E3E3E3;
  margin-bottom: .5em;
  display: inline-flex;
}

.rating-stars .icon-star {
  padding: 0 3px;
}

.rating-stars .icon-star:hover {
  cursor: pointer;
  color: #ffc107;
}

.rating-stars:hover .icon-star {
  color: gold;
}

.rating-stars:hover .icon-star:hover~.icon-star {
  color: inherit;
}
<div class="inner">
  <div class="rating">
    <span class="rating-num">4.0</span>
    <br>
    <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>

0

Нужно использовать sibling-selector: https://developer.mozilla.org/ru/docs/Web/CSS/General_sibling_combinator

.rating-stars > .icon-star:hover ~ .icon-star {
  cursor: pointer;
  color: #ffc107;
}

И указать направление текста, чтобы звездочки не зажигались справа налево:

.rating-stars {
  font-size: 20px;
  color: #e3e3e3;
  margin-bottom: 0.5em;
  
  unicode-bidi: bidi-override;
  direction: rtl;
}

Пример: https://codepen.io/sorx00/pen/poyzwWq

1
  • Тогда придется еще и обработчики в обратном порядке проставлять, а то иначе при клику на звездочки оценки будут ставиться с 5 по 1 балл, а не как положено. 3 авг 2020 в 14:40

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.