[英]Why the other checked radio input and label is not working?
This makes my questions more clear.这使我的问题更加清楚。
I have exactly the same two htmls - A and B. They share the same css, why is A working and B not working??我有完全相同的两个 html - A 和 B。它们共享相同的 css,为什么 A 工作而 B 不工作?
And how can I reverse the heart checked?我怎样才能扭转心脏检查? To make the checked hearts from left to right.
使检查的心从左到右。
I've tried flexbox, but it is difficult to make a container for inputs and labels.我试过 flexbox,但很难为输入和标签制作容器。 Input and label seems inseparable how to do layouts?
输入法和label好像形影不离怎么排版?
I've also tried to use the properties, input:nth-of-type(5), to change orders.我还尝试使用属性 input:nth-of-type(5) 来更改订单。
html: html:
<div class="game">
<h1>A</h1>
<div class="b">
<div class="streaming-info">
<input type="radio" id="h1" name="heart" value="heart">
<input type="radio" id="h2" name="heart" value="heart">
<input type="radio" id="h3" name="heart" value="heart">
<input type="radio" id="h4" name="heart" value="heart">
<input type="radio" id="h5" name="heart" value="heart">
<label for="h1" class="viewers"><i class="fas fa-heart"></i></label>
<label for="h2" class="viewers"><i class="fas fa-heart"></i></label>
<label for="h3" class="viewers"><i class="fas fa-heart"></i></label>
<label for="h4" class="viewers"><i class="fas fa-heart"></i></label>
<label for="h5" class="viewers"><i class="fas fa-heart"></i></label>
</div>
<div class="btnDiv">
<button class="btn"><a href="#">Reviews</a></button>
<button class="btn"><a href="#">Buy</a></button>
</div>
</div>
</div>
<div class="game">
<h1>B</h1>
<div class="b">
<div class="streaming-info">
<input type="radio" id="h1" name="heart" value="heart">
<input type="radio" id="h2" name="heart" value="heart">
<input type="radio" id="h3" name="heart" value="heart">
<input type="radio" id="h4" name="heart" value="heart">
<input type="radio" id="h5" name="heart" value="heart">
<label for="h1" class="viewers"><i class="fas fa-heart"></i></label>
<label for="h2" class="viewers"><i class="fas fa-heart"></i></label>
<label for="h3" class="viewers"><i class="fas fa-heart"></i></label>
<label for="h4" class="viewers"><i class="fas fa-heart"></i></label>
<label for="h5" class="viewers"><i class="fas fa-heart"></i></label>
</div>
<div class="btnDiv">
<button class="btn"><a href="#">Reviews</a></button>
<button class="btn"><a href="#">Buy</a></button>
</div>
</div>
</div>
SCSS: SCSS:
.stats{
display: flex;
}
.streaming-info >input{
// order: 1;
position: absolute;
top:0;
right:0;
opacity: 0;
z-index: -999;
}
label:nth-of-type(5){
order: 2;
}
label:nth-of-type(4){
order:3;
}
label:nth-of-type(3){
order:4;
}
label:nth-of-type(2){
order:5;
}
label:nth-of-type(1){
order:6;
}
input:nth-of-type(1):hover ~label:nth-of-type(1),
input:nth-of-type(2):hover ~label:nth-of-type(2),
input:nth-of-type(3):hover ~label:nth-of-type(3),
input:nth-of-type(4):hover ~label:nth-of-type(4),
input:nth-of-type(5):hover ~label:nth-of-type(5){
color: red;
}
input:nth-of-type(5):checked ~label:nth-of-type(n+5),
input:nth-of-type(4):checked ~label:nth-of-type(n+4),
input:nth-of-type(3):checked ~label:nth-of-type(n+3),
input:nth-of-type(2):checked ~label:nth-of-type(n+2),
input:nth-of-type(1):checked ~label:nth-of-type(n+1){
color: red;
}
You have to wrap all your inputs inside form
tag.您必须将所有输入包装在
form
标签中。 then update your CSS accordingly.然后相应地更新您的 CSS。
Try this,尝试这个,
<!DOCTYPE html> <html lang="en"> <head> </head> <body> <div class="game"> <h1>A</h1> <div class="b"> <div class="streaming-info"> <form> <input type="radio" id="h1" name="heart" value="heart"> <input type="radio" id="h3" name="heart" value="heart"> <input type="radio" id="h4" name="heart" value="heart"> <input type="radio" id="h5" name="heart" value="heart"> <input type="radio" id="h6" name="heart" value="heart"> <label for="h1" class="viewers"><i class="fas fa-heart"></i></label> <label for="h2" class="viewers"><i class="fas fa-heart"></i></label> <label for="h3" class="viewers"><i class="fas fa-heart"></i></label> <label for="h4" class="viewers"><i class="fas fa-heart"></i></label> <label for="h5" class="viewers"><i class="fas fa-heart"></i></label> </form> </div> <div class="btnDiv"> <button class="btn"><a href="#">Reviews</a></button> <button class="btn"><a href="#">Buy</a></button> </div> </div> </div> <div class="game"> <h1>B</h1> <div class="b"> <div class="streaming-info"> <form> <input type="radio" id="h2" name="heart" value="heart"> <input type="radio" id="h2" name="heart" value="heart"> <input type="radio" id="h2" name="heart" value="heart"> <input type="radio" id="h2" name="heart" value="heart"> <input type="radio" id="h2" name="heart" value="heart"> <label for="h1" class="viewers"><i class="fas fa-heart"></i></label> <label for="h2" class="viewers"><i class="fas fa-heart"></i></label> <label for="h3" class="viewers"><i class="fas fa-heart"></i></label> <label for="h4" class="viewers"><i class="fas fa-heart"></i></label> <label for="h5" class="viewers"><i class="fas fa-heart"></i></label> </form> </div> <div class="btnDiv"> <button class="btn"><a href="#">Reviews</a></button> <button class="btn"><a href="#">Buy</a></button> </div> </div> </div> </body> </html>
Hope this helps you a bit:)希望这对您有所帮助:)
have you tried adding the same class name for the two html?您是否尝试为两个 html 添加相同的 class 名称?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.