Изменение рейтинга звезды при наведении

Я использую этот код для отображения звезд:

<ul class="rating">
<li>
<span class="ratingSelector">
<input type="radio" name="ratings[1]" id="Degelijkheid-1-5" value="1" class="radio">
<label class="full" for="Degelijkheid-1-5"></label>
<input type="radio" name="ratings[1]" id="Degelijkheid-2-5" value="2" class="radio">
<label class="full" for="Degelijkheid-2-5"></label>
<input type="radio" name="ratings[1]" id="Degelijkheid-3-5" value="3" class="radio">
<label class="full" for="Degelijkheid-3-5"></label>
<input type="radio" name="ratings[1]" id="Degelijkheid-4-5" value="4" class="radio">
<label class="full" for="Degelijkheid-4-5"></label>
<input type="radio" name="ratings[1]" id="Degelijkheid-5-5" value="5" class="radio">
<label class="full" for="Degelijkheid-5-5"></label>
</span>
</li>
</ul>

Динамический код:

         <ul class="rating">
            <?php foreach ($this->getRatings() as $_rating): ?>
                <li>
                    <span class="rowlabel"><?php echo $this->escapeHtml($_rating->getRatingCode()) ?></span>
                    <span class="ratingSelector">
                <?php foreach ($_rating->getOptions() as $_option): ?>
                    <input type="radio" name="ratings[<?php echo $_rating->getId() ?>]" id="<?php echo $this->escapeHtml($_rating->getRatingCode()) ?>-<?php echo $_option->getValue() ?>-5" value="<?php echo $_option->getId() ?>" class="radio" /><label class="full" for="<?php echo $this->escapeHtml($_rating->getRatingCode()) ?>-<?php echo $_option->getValue() ?>-5"></label>
                <?php endforeach; ?>
                </span>
                </li>
            <?php endforeach; ?>
        </ul>

Но наведение и выбор в настоящее время работают справа налево, но я хочу изменить это слева направо.

Код загружается динамически, поэтому я не могу сначала изменить сортировку и поставить значение 5. Этот динамический код загружается 5 раз, для 5 различных оценок.

Как я могу это изменить? Или какой код JQuery мне нужен?

JSFiddle: https://jsfiddle.net/9nn14beq/

Ответ 1

Это может почти работать с чистым CSS. Для установки начального значения нужна только одна строка JavaScript:

document.getElementById('Degelijkheid-1-5').checked = true;

.rating input {
    display: none;
}
.rating label:before {
    margin: 5px;
    font-size: 1.25em;
    font-family: FontAwesome;
    display: inline-block;
    content:"\f005";
}
li {
    list-style:none;
}

.ratingSelector input + label {
    color: #FFD700;
}
.ratingSelector input:checked ~ input:not(:checked) ~ label {
    color: #ddd;
}
.ratingSelector input:checked ~ input:not(:checked) + label:hover ~ label {
    color: #ddd;
}
.ratingSelector:hover input + label,
.ratingSelector:hover input:checked + label {
    color: #FFED85;
}
.ratingSelector:hover input:checked ~ input:not(:checked) ~ label:hover,
.ratingSelector:hover input:checked ~ input:not(:checked) + label {
    color: #FFD700;
}
.ratingSelector:hover input:checked ~ input:not(:checked) ~ label:hover ~ label {
    color: #ddd !important;
}
.ratingSelector input + label:hover ~ label {
    color: #ddd !important;
}

<ul class="rating">
    <li> <span class="ratingSelector">
    <input type="radio" name="ratings[1]" id="Degelijkheid-1-5" value="1" class="radio"/>
<label class="full" for="Degelijkheid-1-5"></label>
    <input type="radio" name="ratings[1]" id="Degelijkheid-2-5" value="2" class="radio"/>
<label class="full" for="Degelijkheid-2-5"></label>
    <input type="radio" name="ratings[1]" id="Degelijkheid-3-5" value="3" class="radio"/>
<label class="full" for="Degelijkheid-3-5"></label>
    <input type="radio" name="ratings[1]" id="Degelijkheid-4-5" value="4" class="radio"/>
<label class="full" for="Degelijkheid-4-5"></label>
    <input type="radio" name="ratings[1]" id="Degelijkheid-5-5" value="5" class="radio"/>
<label class="full" for="Degelijkheid-5-5"></label>
    </span>
    </li>
</ul>

Ответ 2

Ожидаемая вещь возможна только с помощью css. Поскольку правило css применяется для следующего брата не для предыдущего. Вы также должны использовать JQuery.

Но вы можете сделать это, используя следующий трюк, используя css:

.rating input { display: none; } 
.rating label:before { 
  margin: 5px;
  font-size: 1.25em;
  font-family: FontAwesome;
  display: inline-block;
  content: "\f005";
}

li {list-style:none;
direction:rtl;
text-align: left;}

.rating label { 
  color: #ddd;
}

/***** CSS to Highlight Stars on Hover *****/

.rating input:checked ~ label, /* show gold star when clicked */
.rating:not(:checked) label:hover, /* hover current star */
.rating:not(:checked) label:hover ~ label { color: #FFD700;  } /* hover previous stars in list */

.rating input:checked + label:hover, /* hover current star when changing rating */
.rating input:checked ~ label:hover,
.rating label:hover ~ input:checked ~ label, /* lighten current selection */
.rating input:checked ~ label:hover ~ label { color: #FFED85;  }

<ul class="rating">
<li>
<span class="ratingSelector">
<input type="radio" name="ratings[1]" id="Degelijkheid-5-5" value="5" class="radio">
<label class="full" for="Degelijkheid-5-5"></label>
<input type="radio" name="ratings[1]" id="Degelijkheid-4-5" value="4" class="radio">
<label class="full" for="Degelijkheid-4-5"></label>
<input type="radio" name="ratings[1]" id="Degelijkheid-3-5" value="3" class="radio">
<label class="full" for="Degelijkheid-3-5"></label>
<input type="radio" name="ratings[1]" id="Degelijkheid-2-5" value="2" class="radio">
<label class="full" for="Degelijkheid-2-5"></label>
<input type="radio" name="ratings[1]" id="Degelijkheid-1-5" value="1" class="radio">
<label class="full" for="Degelijkheid-1-5"></label>
</span>
</li>
</ul>

Ответ 3

Как указано в предыдущих ответах, селектора CSS работают только в модульном порядке DOM. (Даже если это может измениться в будущем).

Итак, если вы не можете изменить свой DOM, вам нужно отменить свою логику CSS:

Измените все элементы при наведении контейнера. Затем используйте селектор для изменения элементов справа от зависающего элемента.

.rating input { display: none; } 
.rating label:before { 
  margin: 5px;
  font-size: 1.25em;
  font-family: FontAwesome;
  display: inline-block;
  content: "\f005";
}

li {list-style:none; }

/***** CSS to Highlight Stars on Hover *****/

.rating label {color: grey;}
label:hover { color: red;  }
.ratingSelector:hover .full {color: red; }
.full:hover ~ .full { color: grey !important;  }

<ul class="rating">
<li>
<span class="ratingSelector">
<input type="radio" name="ratings[1]" id="Degelijkheid-1-5" value="1" class="radio">
<label class="full" for="Degelijkheid-1-5"></label>
<input type="radio" name="ratings[1]" id="Degelijkheid-2-5" value="2" class="radio">
<label class="full" for="Degelijkheid-2-5"></label>
<input type="radio" name="ratings[1]" id="Degelijkheid-3-5" value="3" class="radio">
<label class="full" for="Degelijkheid-3-5"></label>
<input type="radio" name="ratings[1]" id="Degelijkheid-4-5" value="4" class="radio">
<label class="full" for="Degelijkheid-4-5"></label>
<input type="radio" name="ratings[1]" id="Degelijkheid-5-5" value="5" class="radio">
<label class="full" for="Degelijkheid-5-5"></label>
</span>
</li>
</ul>

Ответ 4

Просто добавьте ниже код CSS, чтобы сделать это слева направо:

.ratingSelector {
    max-width: 145px;
    display: inline-block;
}
.rating label {
    float: right;
}