html - 拨动开关前元件

Question

这让我有点发疯，所以我很感激任何帮助。

我正在尝试制作一个拨动开关，看起来它下面有一 block 颜色，只有当开关打开时才可见。

因此，当单击开关时，它会向右滑出(添加一些左边距)，然后再次单击时它会滑回。就目前情况而言，我有两个 lis 彼此相邻，都是绝对位置，一个在另一个之上。我正在移动最上面的那个。但即使它们彼此重叠，底部的绿色背景也略微可见。这让我发疯。我试过溢出:隐藏在所有元素上。

HTML:

<ul class="post-list">
    <li class="post-list__month">January</li>
    <li class="post-list__month--hidden"></li>
</ul>  

CSS:

.post-list {
    list-style-type: none;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;

    & li {
        height: 8rem;
        border-radius: 1rem;
        transition: all .5s;
    }

    &__month {
        font-size: 3rem;

        display: inline-block;
        position: absolute;

        background-color: white;
        border: 1px solid rgba(99, 71, 151, 0);
        padding: 2rem;
        z-index: 1;

        &:hover {
            margin-left: 2rem;
            border: 1px solid rgba(99, 71, 151, 0.1);
        }


        &--hidden {
            background-color: green;
            height: 100%;
            width: 7rem;
            border: 1px solid rgba(99, 71, 151, 0);
            overflow: hidden;
            z-index: 0;
        }

    }
}

fiddle 链接:https://jsfiddle.net/ez8mcjtw/

Answer 1

您如何看待使用更语义化的方法...比如一个简单的复选框？它不需要 JavaScript 来切换状态，并且可以在需要时用于将数据传递到服务器。这是一个简单的片段，告诉我你的想法:)

.switch{
    display: inline-block;
    cursor: pointer; 
    border: 2px solid #000;
    background-color: green;
}
.switch *{
   -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
} 
.switch__input{
    position: absolute;
    left: -9999px;
}
.switch__text{
    padding: 10px;
    display: inline-block;
    background-color: #fff;
    transition: all 250ms;
}  
.switch__input:checked + .switch__text{
    margin-left: 30px; 
} 

<label class="switch">
    <input type="checkbox" name="" class="switch__input" value=""> 
    <span class="switch__text">Click me!</span>
</label>

同样在 Codepen 上:https://codepen.io/niki_n14o/pen/eMoYZB