悬停星级无法正常工作
Hover with star rating not working properly
所以我在 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>
使用上一版的font awesome,悬停在星星的后半部分会填满星星。在 5.x 中,您需要将光标一直悬停到星星的末端,然后它才会被填满(我知道这听起来有点含糊,但只需比较 codepen 和这个示例,看看悬停的区别)。
有什么办法可以解决这个问题吗?
我可以通过 "cutting" 将星形容器分成两半来解决这个问题。角色周围的额外 space 导致悬停显示错误地大。
要注意的是,这需要设置一个宽度,这可能会或可能不会成为问题,具体取决于您的实施。
.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>
所以我在 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>
使用上一版的font awesome,悬停在星星的后半部分会填满星星。在 5.x 中,您需要将光标一直悬停到星星的末端,然后它才会被填满(我知道这听起来有点含糊,但只需比较 codepen 和这个示例,看看悬停的区别)。 有什么办法可以解决这个问题吗?
我可以通过 "cutting" 将星形容器分成两半来解决这个问题。角色周围的额外 space 导致悬停显示错误地大。
要注意的是,这需要设置一个宽度,这可能会或可能不会成为问题,具体取决于您的实施。
.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>