[英]css checkbox not applying changes when in the :checked state
I am trying to bring some hidden text into view when a radio checkbox is checked. 选中单选框时,我试图显示一些隐藏的文本。 I cant quite work out why the :checked styling is not applying once the label is checked. 我不能完全弄清楚为什么一旦检查了标签后,:checked样式不适用。 I think i am being really daft but just cant work out what is going on. 我认为我真的很傻,但无法弄清楚发生了什么。
Could anyone lend some advice? 谁能提供一些建议?
.wrap__wrapper { width: 400px; margin: 0 auto; } .wrap { position: relative; overflow: hidden; } .wrap__radio--input { display: none; } .wrap__inner { width: 300%; left: 0; transition: all 1s; } .wrap__slides { float: left; width: 33.333%; } .wrap__text { font-size: 16px; text-align: center; } .wrap__button { font-size: 1.8rem; cursor: pointer; text-align: center; display: block; } .wrap__radio--input:checked~.wrap__inner { transition: all 1s; background: red; left: -100%; }
<div class="wrap__wrapper"> <div class="wrap"> <input type="radio" class="wrap__radio--input" id="slide--1"> <label for="slide--1" class="wrap__button">next slide</label> <div class="wrap__inner"> <div class="wrap__slides"> <p class="wrap__text">slide1</p> </div> <div class="wrap__slides"> <p class="wrap__text">slide2</p> </div> </div> </div> </div>
Your element need to be positionned so you have to set position
property to relative
, absolute
or fixed
on .wrap__inner
to be able to use left property. 您的元素需要定位,因此必须将position
属性设置为relative
, absolute
或fixed
在.wrap__inner
上才能使用left属性。 You cannot update position of static element. 您无法更新静态元素的位置。
.wrap__wrapper { width: 400px; margin: 0 auto; } .wrap { position: relative; overflow: hidden; } .wrap__radio--input { display: none; } .wrap__inner { position:relative; width: 300%; left: 0; transition: all 1s; } .wrap__slides { float: left; width: 33.333%; } .wrap__text { font-size: 16px; text-align: center; } .wrap__button { font-size: 1.8rem; cursor: pointer; text-align: center; display: block; } .wrap__radio--input:checked~.wrap__inner { transition: all 1s; background: red; left: -100%; }
<div class="wrap__wrapper"> <div class="wrap"> <input type="radio" class="wrap__radio--input" id="slide--1"> <label for="slide--1" class="wrap__button">next slide</label> <div class="wrap__inner"> <div class="wrap__slides"> <p class="wrap__text">slide1</p> </div> <div class="wrap__slides"> <p class="wrap__text">slide2</p> </div> <div class="wrap__slides"> <p class="wrap__text">slide3</p> </div> </div> </div> </div>
You can use the :before
or :after
pseudo-elements to toggle the previous and next text, apply the position
property different from the default value of static to the .wrap__inner
div and most importantly change the input type="radio"
to input type="checkbox"
to be able to toggle the checkbox state: 您可以使用:before
或:after
伪元素来切换上一个和下一个文本,将与static的默认值不同的position
属性应用于.wrap__inner
div ,最重要的是将input type="radio"
更改为input type="checkbox"
以能够切换 复选框状态:
.wrap__wrapper { width: 400px; margin: 0 auto; } .wrap { position: relative; overflow: hidden; } .wrap__radio--input { display: none; } .wrap__inner { position: relative; /* any value other than default */ width: 300%; left: 0; transition: all 1s; } .wrap__slides { float: left; width: 33.333%; } .wrap__text { font-size: 16px; text-align: center; } .wrap__button { font-size: 1.8rem; cursor: pointer; text-align: center; display: block; } /* added */ .wrap__button:after { content: "next"; } .wrap__radio--input:checked + .wrap__button:after { content: "previous"; } /***/ .wrap__radio--input:checked ~ .wrap__inner { transition: all 1s; background: red; left: -100%; }
<div class="wrap__wrapper"> <div class="wrap"> <input type="checkbox" class="wrap__radio--input" id="slide--1"> <label for="slide--1" class="wrap__button"></label> <div class="wrap__inner"> <div class="wrap__slides"> <p class="wrap__text">slide1</p> </div> <div class="wrap__slides"> <p class="wrap__text">slide2</p> </div> </div> </div> </div>
Note: Like I wrote in the comment, this only works for two slides. 注意:就像我在评论中所写的那样,这仅适用于两张幻灯片。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.