我无法让 :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 (将#修改为@）

checked html pseudo-class