Html 每个星级的星级评定都是独立的
我有一个奇怪的问题,当我有一个星级的代码工作得很好,但问题是当我添加另一个星级。第二个星级与第一个星级相连(我对第二个星级所做的每个更改都会显示在第一个星级中)。我想知道如何修复此错误并使每个星级独立Html 每个星级的星级评定都是独立的,html,css,Html,Css,我有一个奇怪的问题,当我有一个星级的代码工作得很好,但问题是当我添加另一个星级。第二个星级与第一个星级相连(我对第二个星级所做的每个更改都会显示在第一个星级中)。我想知道如何修复此错误并使每个星级独立 html代码 <fieldset class="rating"> <legend>Please rate:</legend> <input type="radio" id="star5" name="rating" value="5" /&
html代码
<fieldset class="rating">
<legend>Please rate:</legend>
<input type="radio" id="star5" name="rating" value="5" />
<label for="star5" title="Rocks!">5 stars</label>
<input type="radio" id="star4" name="rating" value="4" />
<label for="star4" title="Pretty good">4 stars</label>
<input type="radio" id="star3" name="rating" value="3" />
<label for="star3" title="Meh">3 stars</label>
<input type="radio" id="star2" name="rating" value="2" />
<label for="star2" title="Kinda bad">2 stars</label>
<input type="radio" id="star1" name="rating" value="1" />
<label for="star1" title="Sucks big time">1 star</label>
</fieldset>
<br>
<br>
<br>
<fieldset class="rating">
<legend>Please rate:</legend>
<input type="radio" id="star5" name="rating" value="5" /><label for="star5" title="Rocks!">5 stars</label>
<input type="radio" id="star4" name="rating" value="4" /><label for="star4" title="Pretty good">4 stars</label>
<input type="radio" id="star3" name="rating" value="3" /><label for="star3" title="Meh">3 stars</label>
<input type="radio" id="star2" name="rating" value="2" /><label for="star2" title="Kinda bad">2 stars</label>
<input type="radio" id="star1" name="rating" value="1" /><label for="star1" title="Sucks big time">1 star</label>
</fieldset>
看看这个:
div.stars{
宽度:270px;
显示:内联块;
}
input.star{display:none;}
星号{
浮动:对;
填充:10px;
字体大小:36px;
颜色:#444;
过渡:all.2s;
}
输入。星号:选中~标签。星号:之前{
内容:'\f005';
颜色:#FD4;
过渡:全部为0.25秒;
}
输入。star-5:选中~标签。star:之前{
颜色:#FE7;
文本阴影:0 0 20px#952;
}
input.star-1:选中~label.star:在{color:#F62;}之前
标签.星形:悬停{变换:旋转(-15度)比例(1.3);}
明星:之前{
内容:'\f006';
字体系列:Fontsome;
}
看看这个:
div.stars{
宽度:270px;
显示:内联块;
}
input.star{display:none;}
星号{
浮动:对;
填充:10px;
字体大小:36px;
颜色:#444;
过渡:all.2s;
}
输入。星号:选中~标签。星号:之前{
内容:'\f005';
颜色:#FD4;
过渡:全部为0.25秒;
}
输入。star-5:选中~标签。star:之前{
颜色:#FE7;
文本阴影:0 0 20px#952;
}
input.star-1:选中~label.star:在{color:#F62;}之前
标签.星形:悬停{变换:旋转(-15度)比例(1.3);}
明星:之前{
内容:'\f006';
字体系列:Fontsome;
}
非常感谢您。。。你能告诉我是什么导致了我的代码中的错误吗?请将其标记为答案,查看从1-10开始的id=star-n
这个n
我明白了你的意思,我更新了你在代码中所说的,因为我需要相同的设计,但我仍然有一个问题,当我给第二颗星打分时,悬停从第一颗星消失了。非常感谢。。。你能告诉我是什么导致了我的代码中的错误吗?请把它标记为答案,看看这个id=star-n
这个n
从1-10开始我明白了你的意思,我更新了你在代码中所说的,因为我需要相同的设计,但我仍然有一个问题,当我给第二颗星打分时,悬停从第一颗星消失。
.rating {
float:left;
}
/* :not(:checked) is a filter, so that browsers that don’t support :checked don’t
follow these rules. Every browser that supports :checked also supports :not(), so
it doesn’t make the test unnecessarily selective */
.rating:not(:checked) > input {
position:absolute;
top:-9999px;
clip:rect(0,0,0,0);
}
.rating:not(:checked) > label {
float:right;
width:1em;
padding:0 .1em;
overflow:hidden;
white-space:nowrap;
cursor:pointer;
font-size:200%;
line-height:1.2;
color:#ddd;
text-shadow:1px 1px #bbb, 2px 2px #666, .1em .1em .2em rgba(0,0,0,.5);
}
.rating:not(:checked) > label:before {
content: '★ ';
}
.rating > input:checked ~ label {
color: #f70;
text-shadow:1px 1px #c60, 2px 2px #940, .1em .1em .2em rgba(0,0,0,.5);
}
.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
color: gold;
text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5);
}
.rating > input:checked + label:hover,
.rating > input:checked + label:hover ~ label,
.rating > input:checked ~ label:hover,
.rating > input:checked ~ label:hover ~ label,
.rating > label:hover ~ input:checked ~ label {
color: #ea0;
text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5);
}
.rating > label:active {
position:relative;
top:2px;
left:2px;
}