Как правильно сверстать звезды рейтинга с помощью css?

#javascript #html #css #вёрстка

Идея такая: есть 5 звездочек в выборе отеля(выведены в линию). Нужно отрисовать так,
чтобы при наведении на отдельную половинку она закрашивалась (и закрашивались все предыдущие
звездочки), а при клике остались закрашеные. Как это реализовать?

Вот код:



input.rollover_star_left {
  border: 0;
  background: url(http://i.piccy.info/i9/acf4293564d7a31bcefbbd1d0f7cfb50/1508744962/665/1188837/star_left.png);
  width: 9px;
  height: 17px;
  opacity: 1;
  margin-left: 0%;
  padding: 0%;
  position: relative;
}

input.rollover_star_right {
  border: 0;
  background: url(http://i.piccy.info/i9/96647d92383f2c62285a388ac4250516/1508745513/665/1188837/star_right.png);
  width: 9px;
  height: 17px;
  opacity: 1;
  margin-left: 0%;
  padding: 0%;
  position: relative;
}

input.rollover_star_right:hover {
  background: url(http://i.piccy.info/i9/caabcb81d9900bd6b972db8253ea49fc/1508746359/647/1188837/white_star_right.png);
  transition: all 0.25s ease-in-out;
}

input.rollover_star_left:hover {
  background: url(http://i.piccy.info/i9/2e385a77c4916b4c9e1e5d29d8bedb1b/1508746351/647/1188837/white_star_left.png);
  transition: all 0.25s ease-in-out;
}





    

Ответы

Ответ 1

В сети полно примеров, вот например один из них:



.rating-wrapper {
  overflow: hidden;
  display: inline-block;
}

.rating-input {
  position: absolute;
  left: 0;
  top: -50px;
}

.rating-star:hover,
.rating-star:hover~.rating-star {
  background-position: 0 0;
}

.rating-wrapper:hover .rating-star:hover,
.rating-wrapper:hover .rating-star:hover~.rating-star,
.rating-input:checked~.rating-star {
  background-position: 0 0;
}

.rating-star,
.rating-wrapper:hover .rating-star {
  float: right;
  display: block;
  width: 16px;
  height: 16px;
  background: url('http://css-stars.com/wp-content/uploads/2013/12/stars.png') 0 -16px;
}

@media screen and (min-device-width: 320px) and (max-device-width: 640px) {
  .responsive-ad {
    display: none;
    text-align: center;
  }
  .responsive-ad-device {
    display: block;
  }
}

@media screen and (min-device-width: 960px) {
  .responsive-ad-device {
    display: none;
  }
  .responsive-ad {
    display: block;
    text-align: center;
  }
}