Question

我正在寻找一些帮助，以便在检查标签后移动我的复选框标签。当它开始时，标签位于代码的中间。然而，在我点击它之后，我希望它能被移动。我以为我拥有它，但现在看起来并不那样。是否有人愿意伸出援助之手？

JSFiddle：http://jsfiddle.net/50c419nL/4/

标记：

<div id="vera-gallery">
    <div class="vera-check">
        <label for="vone">e x i l e</label>
        <input type="checkbox" id="vone" name="main" />
        <div class="vera-bar">I'm controlled by toggle. No JavaScript!</div>
    </div>
</div>

CSS：

#vera-gallery {
    width: 500px;
    height: 500px;
    overflow: hidden;
    background-image:url(http://i.imgur.com/ZOmzzeE.png);
    margin: auto;
    position: relative;
}
#vera-gallery input[type=checkbox] {
    display: none;
}
.vera-check {
    width: 500px;
    height: 500px;
}
.vera-check input[type=checkbox] {
    position: absolute;
    top: 50%;
    left: 50%;
}
.vera-check input[type=checkbox]:checked ~ .vera-bar {
    margin-left: 0;
}
.vera-check label {
    cursor: pointer;
}
.vera-check label[for=vone] {
    top: 235px;
    width: 80px;
    text-align: center;
    font-family: oxygen;
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
    text-align: center;
    padding: 10px;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.8);
    left: 200px;
    border: 1px solid #fff;
}
.vera-check input[type=checkbox]:checked ~ label[for=vone] {
    top: 10px;
    left: 10px;
}
.vera-bar {
    width: 470px;
    padding: 15px;
    background-color: rgba(0, 0, 0, 0.8);
    float: left;
    top: 0px;
    height: 100%;
    font-family: oxygen;
    font-weight: bold;
    color: #fff;
    margin-left: -500px;
    transition: 0.5s all ease;
    -webkit-transition: 0.5s all ease;
    -moz-transition: 0.5s all ease;
    -ms-transition: 0.5s all ease;
    -o-transition: 0.5s all ease;
}
.vera-ships {
    width: 225px;
    padding: 15px;
    background-color: rgba(0, 0, 0, 0.8);
    float: left;
    top: 0px;
    height: 100%;
    font-family: oxygen;
    font-weight: bold;
    color: #fff;
    margin-left: -255px;
    transition: 0.5s all ease;
    -webkit-transition: 0.5s all ease;
    -moz-transition: 0.5s all ease;
    -ms-transition: 0.5s all ease;
    -o-transition: 0.5s all ease;
}
.vera-two {
    position: absolute;
}
.vera-two .vera-chk {
    float: left
}
.vera-two input[type=checkbox] {
    display: none
}

Answer 1

general sibling选择器在这种情况下不起作用，标记为原样，因为复选框输入不在标签之前。

〜组合器分离两个选择器并匹配第二个选择器元素只有在第一个元素之前，并且两者共享一个共同元素父节点。

但是，如果您在 div之后移动标签，则可以：http://jsfiddle.net/50c419nL/5/

<div id="vera-gallery"> <div class="vera-check"> <input type="checkbox" id="vone" name="main" /> <div class="vera-bar">I'm controlled by toggle. No JavaScript!</div> <label for="vone">e x i l e</label> </div> </div>

选中框时移动复选框标签

1 个答案: