如何解决我无法让 :checked 伪类正常工作
我正在尝试创建一个带有下方导航点的手动滑动轮播。用户可以点击这些点进行导航。我正在使用单选按钮 + 标签 hack。问题在于点击标签时,单选按钮被点击但导航没有发生,换句话说,图像没有滑动。
我已经花了 2 天的时间试图弄明白。但我不能。
这是我的 HTML 代码
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="main.css">
<title>Slider</title>
</head>
<body>
<div class="slider">
<div class="slider__radio">
<input type="radio" name="slider__radios" id="slider__radio--1" checked>
<input type="radio" name="slider__radios" id="slider__radio--2">
<input type="radio" name="slider__radios" id="slider__radio--3">
</div>
<div class="slides">
<div class="slide slide__only">
<img src="1.jpg" alt="">
</div>
<div class="slide">
<img src="2.jpg" alt="">
</div>
<div class="slide">
<img src="3.jpg" alt="">
</div>
</div>
<div class="slides__label">
<label for="slider__radio--1" class="slides__btn slides__btn1"></label>
<label for="slider__radio--2" class="slides__btn slides__btn2"></label>
<label for="slider__radio--3" class="slides__btn slides__btn3"></label>
</div>
</div>
</body>
</html>
这里是 CSS
.slider__radio {
display: none;
}
.slider {
width: 90vw;
margin: auto;
overflow: hidden;
height: auto;
border-radius: 10px;
}
.slides {
width: 300%;
display: flex;
}
.slide {
width: 90vw;
transition: 2s;
}
.slide img {
width: 100%;
}
.slides__btn:hover {
background-color: #fff;
}
.slides__label {
position: absolute;
width: 100%;
left: 0;
top: 45%;
display: flex;
justify-content: center;
}
.slides__btn {
padding: 8px;
border-radius: 50%;
border: 2px solid #fff;
cursor: pointer;
transition: all 0.5s;
}
.slides__btn:not(:last-child) {
margin-right: 20px;
}
#slider__radio--1:checked ~ .slide__only {
margin-left: 0;
}
#slider__radio--2:checked ~ .slide__only {
margin-left: -33.33333%;
}
#slider__radio--3:checked ~ .slide__only {
margin-left: -66.66666%;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。