我正在尝试在选中收音机复选框时将一些隐藏文字带入视图。我无法解决为什么:检查标签后检查样式不适用。我认为我真的很愚蠢但只是无法解决正在发生的事情。
有人可以提供一些建议吗?
.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>
答案 0 :(得分:0)
您的元素必须为positionned,因此您必须在position
上将relative
属性设置为absolute
,fixed
或.wrap__inner
能够使用左财产。您无法更新静态元素的位置。
.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>
答案 1 :(得分:0)
您可以使用:before
或:after
伪元素来切换 之前的和下一步文本,将静态的默认值的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%;
}
&#13;
<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>
&#13;
注意:就像我在评论中写的那样,这只适用于两张幻灯片。