Показать сообщение отдельно
  #4 (permalink)  
Старый 01.11.2016, 09:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

звёздный рейтинг
zulyamodx,
можно но в глазах рябит от классов
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  body{
    background-color:  #EE82EE;
  }

  .free:hover .star-rating, .star-rating-control.hover .star-rating{
      background-position: 0px -113px;
      color: #FFD700;
  }
  .free:hover .star-rating:hover ~ .star-rating, .star-rating-control.hover .star-rating.hover ~ .star-rating {
      background-position: 0px 1px;
      color: #3DC430;
  }

  .star-rating{
     cursor: pointer;
     text-align: center;
     line-height: 34px;
     background-position: 0px 1px;
     background-image: url(http://kredito.com.ua/bitrix/template/kredito/files/stars-full.svg);
     background-repeat: no-repeat;
     background-size: cover;
     width: 30px;
     height: 30px;
     float: left;

  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
     $(".star-rating-control").each(function(indx, el){
           $(el).on('click', '.star-rating', function(event) {
           event.preventDefault();
           if(!$(el).is('.free')) return;
           $(el).add(this).addClass('hover').removeClass('free');
           var rating = +$('.star-rating',el).index(this);
           $('input',el).val(++rating);
})

           });
});
  </script>
</head>

<body>
<span class="star-rating-control free">
    <input type="hidden" name="rate1_1" value="">

    <div role="text" aria-label="" class="star-rating rater-0 star-rating-applied star-rating-live" id="CompanyReviewForm_rating1_0">
        <a title="1">1</a>
    </div>

    <div role="text" aria-label="" class="star-rating rater-0 star-rating-applied star-rating-live" id="CompanyReviewForm_rating1_1">
        <a title="2">2</a>
    </div>

    <div role="text" aria-label="" class="star-rating rater-0 star-rating-applied star-rating-live" id="CompanyReviewForm_rating1_2">
        <a title="3">3</a>
    </div>

    <div role="text" aria-label="" class="star-rating rater-0 star-rating-applied star-rating-live" id="CompanyReviewForm_rating1_3">
        <a title="4">4</a>
    </div>

    <div role="text" aria-label="" class="star-rating rater-0 star-rating-applied star-rating-live" id="CompanyReviewForm_rating1_4">
        <a title="5">5</a>
    </div>
</span>


</body>
</html>

Последний раз редактировалось рони, 01.11.2016 в 18:19.
Ответить с цитированием