html - 为什么其他检查的无线电输入和标签不起作用?
问题描述
这使我的问题更加清楚。
我有完全相同的两个 html - A 和 B。它们共享相同的 css,为什么 A 工作而 B 不工作?
我怎样才能扭转心脏检查?使检查的心从左到右。
我尝试过 flexbox,但很难为输入和标签制作容器。输入和标签似乎密不可分 布局怎么做?
我还尝试使用属性 input:nth-of-type(5) 来更改订单。
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:
.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;
}
解决方案
您必须将所有输入包装在form
标签内。然后相应地更新您的 CSS。
尝试这个,
<!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>
希望这对您有所帮助:)
推荐阅读
- flutter - Flutter(dart)文件上传,进度条-文件上传流在上传过程中不回馈数据
- airflow - 任务缺少 start_date 参数
- python - 如何在 v.DataTable 中选择一个元素?
- javascript - jQuery mobile 只使用一个 Event
- jquery - jQuery UI(可拖动):放置后元素未放置在我的光标位置
- reactjs - 警告:无效的 DOM 属性“类”。你的意思是“className”吗?
- android - Firebase onCall 函数将结果保存到 android 中的变量中
- mapr - 带有 mapr 客户端的节点是否需要访问我要使用 distcp 复制的文件?
- java - 我正在尝试编写计算器,但是当我使用带逗号的数字时,我收到一条错误消息
- php - 在 Symfony for PHP 中使用 foreach 循环和会话显示结果