4

Идея такая: есть 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;
}
<input name="star" type="submit" value="" class="rollover_star_left">
<input name="star" type="submit" value="" class="rollover_star_right">

3
  • Ну реализовать то вроде не сложно. Вопрос в том, что тут помогают, а не делают за вас. Поэтому уточните, что именно у вас не получается ? Нарисовать звездочки и заполнить их ? Или сам код, что будет закрашивать их справа на лево ?
    – alexoander
    23 окт 2017 в 8:56
  • Я вставляю звездочки половинками в input и закрашиваю их hover в css. Не могу понять, во-первых, как их поставить вплотную друг к другу и, во-вторых, да, не могу понять как закрасить все которые с лева от курсора 23 окт 2017 в 9:01
  • Ну тогда вставьте пример вашего кода сюда, чтобы можно было помочь с расположением. Насчет JS кода можно сделать "влоб" - создаем массив из 5 элементов с возможными значениями 0, 1, 2 (незакрашено, закрашена половина, закрашено польностью).У звездочек есть условные id типа star1,star2 и т.п. Когда человек щелкает по нужному инпуту, idшник зведы сопоставляем с массивом и по циклу закрышиваем то что нужно. Но это в общем
    – alexoander
    23 окт 2017 в 9:05

1 ответ 1

8

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

.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;
  }
}
<div class="rating-wrapper">
  <input class="rating-input" id="rating-input-1-5" type="radio" name="rating-input-1" />
  <label class="rating-star" for="rating-input-1-5"></label>
  <input class="rating-input" id="rating-input-1-4" type="radio" name="rating-input-1" />
  <label class="rating-star" for="rating-input-1-4"></label>
  <input class="rating-input" id="rating-input-1-3" type="radio" name="rating-input-1" />
  <label class="rating-star" for="rating-input-1-3"></label>
  <input class="rating-input" id="rating-input-1-2" type="radio" name="rating-input-1" />
  <label class="rating-star" for="rating-input-1-2"></label>
  <input class="rating-input" id="rating-input-1-1" type="radio" name="rating-input-1" />
  <label class="rating-star" for="rating-input-1-1"></label>
</div>

1
  • 1
    То что надо!!! Хороший ответ и шикарный ресурс. Спасибо! 23 окт 2017 в 9:17

Ваш ответ

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

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