没有“for”标签的CSS图像滑块

Question

我成功实现了这个CSS图像滑块。

但是现在我想将其插入到 Reveal.js 演示文稿的模态窗口中。

我从 this other thread 假设，reveal.js 的多模式插件不会删除隐藏的 div 内容，而是附加到模式 div 中。这会为相同的单选按钮创建 2 个实例，因此包含

for

标签的标签不适用于更改图像。只有使单选按钮可见，我才能更改图像。但我宁愿使用一个可以用 CSS 调整、放大和美化的标签。

由于我无法修改插件，因此我认为最好的选择是找到

for

标签的替代品。我尝试将单选按钮包装在

label

标签内，如下所示，但没有成功。一旦单选按钮位于标签标签内，图像就不会改变。

<label class="bullets">
  <input type="radio" checked="checked" name="images" id="i1">
  <span class="checkmark"></span>
</label>
<div class="slide_img" id="one">            
  <img src="https://picsum.photos/id/237/300/200">
</div>

负责更改图像的 CSS 部分如下：

.slide_img{z-index: -1;}

    #i1:checked ~ #one  ,
    #i2:checked ~ #two  ,
    #i3:checked ~ #three,
    #i4:checked ~ #four 
    {z-index: 9; animation: scroll 1s ease-in-out;}

/* The container */
.bullets {
  display: inline;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.bullets input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 15px;
  width: 15px;
  background-color: #eee;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.bullets:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.bullets input:checked ~ .checkmark {
  background-color: #2196F3;
}
.container{
        margin: 0 auto;
        margin-top: 20px;
        position: relative;
        width: 70%;
        height: 0;
        padding-bottom: 38%;
      user-select: none;
        background-color: #1c1c1c;
        border: solid 10px #616161;
        border-radius:10px ; 
    }

    .container .slide_img{
        position: absolute;
        width: 100%;;
        height: 100%;
    }
    .container .slide_img img{
        width: inherit;
        height: inherit;
    }


.slide_img{z-index: -1;}

    #i1:checked ~ #one  ,
    #i2:checked ~ #two  ,
    #i3:checked ~ #three,
    #i4:checked ~ #four 
    {z-index: 9; animation: scroll 1s ease-in-out;}

@keyframes scroll{
    0%{ opacity:.4;}
    100%{opacity:1;}
}       

<div class="container">
  <label class="bullets">
    <input type="radio" checked="checked" name="images" id="i1" />
    <span class="checkmark"></span>
  </label>
  <label class="bullets">
    <input type="radio" name="images" id="i2" />
    <span class="checkmark"></span>
  </label>
  <label class="bullets">
    <input type="radio" name="images" id="i3" />
    <span class="checkmark"></span>
  </label>
  <label class="bullets">
    <input type="radio" name="images" id="i4" />
    <span class="text checkmark"></span>
  </label>

  <div class="slide_img" id="one">
    <img src="https://picsum.photos/id/237/300/200" />
  </div>

  <div class="slide_img" id="two">
    <img src="https://picsum.photos/id/21/200/300" />
  </div>

  <div class="slide_img" id="three">
    <img src="https://picsum.photos/id/456/200/300" />
  </div>

  <div class="slide_img" id="four">
    <img src="https://picsum.photos/id/536/200/300" />
  </div>
</div>

您可以在这个jsFiddle中检查它。谁能指出这个问题的 CSS 解决方案吗？我不想使用

js

以免与 Reveal.js 及其插件相冲突。

Answer 1

如评论所述，选择器 :has() 可以在这里为您提供帮助：https://developer.mozilla.org/en-US/docs/Web/CSS/:has

您的代码示例

/* The container */

.bullets {
  display: inline;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; 
  z-index:10;
}


/* Hide the browser's default radio button */

.bullets input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}


/* Create a custom radio button */

.checkmark {
  position: absolute; 
  top: 0;
  left: 0;
  height: 15px;
  width: 15px;
  background-color: #eee;
  border-radius: 50%;
}


/* On mouse-over, add a grey background color */

.bullets:hover input~.checkmark {
  background-color: #ccc;
}


/* When the radio button is checked, add a blue background */

.bullets input:checked~.checkmark {
  background-color: #2196f3;
}

.container {
  margin: 0 auto;
  margin-top: 20px;
  position: relative;
  width: 70%;
  height: 0;
  padding-bottom: 38%;
  user-select: none;
  background-color: #1c1c1c;
  border: solid 10px #616161;
  border-radius: 10px;
}

.container .slide_img {
  position: absolute;
  width: 100%;
  height: 100%;
  top:0;
}

.container .slide_img img {
  width: inherit;
  height: inherit;
}

.slide_img {

}

label:has(#i1:checked)~#one,
label:has(#i2:checked)~#two,
label:has(#i3:checked)~#three,
label:has(#i4:checked)~#four {
  z-index: 9;
  animation: scroll 1s ease-in-out;
}

@keyframes scroll {
  0% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}

<div class="container">
  <label class="bullets">
    <input type="radio" checked="checked" name="images" id="i1" />
    <span class="checkmark"></span>
  </label>
  <label class="bullets">
    <input type="radio" name="images" id="i2" />
    <span class="checkmark"></span>
  </label>
  <label class="bullets">
    <input type="radio" name="images" id="i3" />
    <span class="checkmark"></span>
  </label>
  <label class="bullets">
    <input type="radio" name="images" id="i4" />
    <span class="text checkmark"></span>
  </label>

  <div class="slide_img" id="one">
    <img src="https://picsum.photos/id/237/300/200" />
  </div>

  <div class="slide_img" id="two">
    <img src="https://picsum.photos/id/21/200/300" />
  </div>

  <div class="slide_img" id="three">
    <img src="https://picsum.photos/id/456/200/300" />
  </div>

  <div class="slide_img" id="four">
    <img src="https://picsum.photos/id/536/200/300" />
  </div>
</div>