Hover со звездным рейтингом не работает должным образом - PullRequest
Новая
       6

Hover со звездным рейтингом не работает должным образом

0 голосов
/ 30 октября 2018

Итак, я нашел следующий код на codepen (https://codepen.io/anon/pen/Edzxaj), чтобы создать рейтинг по звездам, который отлично работает для Font Awesome 3.x и 4.x, но не дает тот же результат на 5.x, когда парящий над звездами. 

/* Base setup */
@import url(//use.fontawesome.com/releases/v5.4.2/css/all.css);

/* Ratings widget */
.rate {
    display: inline-block;
    border: 0;
}
/* Hide radio */
.rate > input {
    display: none;
}
/* Order correctly by floating highest to the right */
.rate > label {
    float: right;
}
/* The star of the show */
.rate > label:before {
    display: inline-block;
    font-size: 1.1rem;
    padding: .3rem .2rem;
    margin: 0;
    cursor: pointer;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: "\f005"; /* full star */
}

/* Half star trick */
.rate .half:before {
    content: "\f089"; /* half star no outline */
    position: absolute;
    padding-right: 0;
}

/* Click + hover color */
input:checked ~ label, /* color current and previous stars on checked */
label:hover, label:hover ~ label { color: #73B100;  } /* color previous stars on hover */

/* Hover highlights */
input:checked + label:hover, input:checked ~ label:hover, /* highlight current and previous stars */
input:checked ~ label:hover ~ label, /* highlight previous selected stars for new rating */
label:hover ~ input:checked ~ label /* highlight previous selected stars */ { color: #A6E72D;  } 
<fieldset class="rate">
    <input type="radio" id="rating10" name="rating" value="10" /><label for="rating10" title="5 stars"></label>
    <input type="radio" id="rating9" name="rating" value="9" /><label class="half" for="rating9" title="4 1/2 stars"></label>
    <input type="radio" id="rating8" name="rating" value="8" /><label for="rating8" title="4 stars"></label>
    <input type="radio" id="rating7" name="rating" value="7" /><label class="half" for="rating7" title="3 1/2 stars"></label>
    <input type="radio" id="rating6" name="rating" value="6" /><label for="rating6" title="3 stars"></label>
    <input type="radio" id="rating5" name="rating" value="5" /><label class="half" for="rating5" title="2 1/2 stars"></label>
    <input type="radio" id="rating4" name="rating" value="4" /><label for="rating4" title="2 stars"></label>
    <input type="radio" id="rating3" name="rating" value="3" /><label class="half" for="rating3" title="1 1/2 stars"></label>
    <input type="radio" id="rating2" name="rating" value="2" /><label for="rating2" title="1 star"></label>
    <input type="radio" id="rating1" name="rating" value="1" /><label class="half" for="rating1" title="1/2 star"></label>
</fieldset>

Если использовать предыдущую версию шрифта потрясающе, при наведении курсора на вторую половину звезды будет заполнена звезда. В 5.x вам нужно навести курсор до конца звезды, прежде чем она заполнится (я знаю, что это звучит немного расплывчато, но просто сравните кодовую ручку и этот пример, чтобы увидеть разницу в зависании). Есть ли способ исправить это?

1 Ответ

0 голосов
/ 30 октября 2018

Мне удалось решить эту проблему, «разрезав» звездный контейнер пополам. Дополнительное пространство вокруг персонажа приводило к тому, что зависание показывалось неправильно большим.

Уловка в том, что это требует установки ширины, которая может или не может быть проблемой в зависимости от вашей реализации.

.half Получает ширину, равную примерно половине полной звезды, затем overflow:hidden удаляет лишнюю половину, а margin-right перемещает звезду влево. Он также использует значок полной звезды для обоих дисплеев, чтобы они выстраивались лучше. 

/* Base setup */
@import url(//use.fontawesome.com/releases/v5.4.2/css/all.css);

/* Ratings widget */
.rate {
    display: inline-block;
    border: 0;
}
/* Hide radio */
.rate > input {
    display: none;
}
/* Order correctly by floating highest to the right */
.rate > label {
    float: right;
}
/* The star of the show */
.rate > label:before {
    display: inline-block;
    font-size: 1.1rem;
    padding: .3rem .2rem;
    margin-right:0;
    cursor: pointer;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: "\f005"; /* full star */
}

/* Half star trick */
.rate .half:before {
    content: "\f005"; /* half star no outline */
    position: absolute;
    padding-right: 0;
    width: 0.6rem;
    overflow: hidden;
    margin-right: 0.4rem;
}

/* Click + hover color */
input:checked ~ label, /* color current and previous stars on checked */
label:hover, label:hover ~ label { color: #73B100;  } /* color previous stars on hover */

/* Hover highlights */
input:checked + label:hover, input:checked ~ label:hover, /* highlight current and previous stars */
input:checked ~ label:hover ~ label, /* highlight previous selected stars for new rating */
label:hover ~ input:checked ~ label /* highlight previous selected stars */ { color: #A6E72D;  } 
<fieldset class="rate">
    <input type="radio" id="rating10" name="rating" value="10" /><label for="rating10" title="5 stars"></label>
    <input type="radio" id="rating9" name="rating" value="9" /><label class="half" for="rating9" title="4 1/2 stars"></label>
    <input type="radio" id="rating8" name="rating" value="8" /><label for="rating8" title="4 stars"></label>
    <input type="radio" id="rating7" name="rating" value="7" /><label class="half" for="rating7" title="3 1/2 stars"></label>
    <input type="radio" id="rating6" name="rating" value="6" /><label for="rating6" title="3 stars"></label>
    <input type="radio" id="rating5" name="rating" value="5" /><label class="half" for="rating5" title="2 1/2 stars"></label>
    <input type="radio" id="rating4" name="rating" value="4" /><label for="rating4" title="2 stars"></label>
    <input type="radio" id="rating3" name="rating" value="3" /><label class="half" for="rating3" title="1 1/2 stars"></label>
    <input type="radio" id="rating2" name="rating" value="2" /><label for="rating2" title="1 star"></label>
    <input type="radio" id="rating1" name="rating" value="1" /><label class="half" for="rating1" title="1/2 star"></label>
</fieldset>
...