Html 拨动开关前元件

这让我有点疯狂，所以我非常感谢你的帮助

我试着做一个拨动开关，看起来下面有一块只有在开关打开时才可见的颜色

因此，当点击开关时，它会向右滑动（向左添加一些边距），然后再次点击时，它会向后滑动。就目前的情况来看，我有两个lis紧挨着，都是绝对位置，一个在另一个上面。我正在移动最上面的那个。但即使它们位于彼此的顶部，底部的绿色背景也会略微可见。它快把我逼疯了。我尝试过溢出：隐藏在所有元素上

HTML:

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

.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:

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

开关{
显示：内联块；
光标：指针；
边框：2倍实心#000；
背景颜色：绿色；
}
.开关*{
-moz用户选择：无；
-khtml用户选择：无；
-webkit用户选择：无；
-ms用户选择：无；
用户选择：无；
} 
.开关输入{
位置：绝对位置；
左：-9999px；
}
.切换\uuu文本{
填充：10px；
显示：内联块；
背景色：#fff；
过渡：所有250ms；
}  
.开关\输入：选中+.开关\文本{
左边距：30px；
}

点击我！

我认为这是一种正常的行为。空白处没有任何颜色。这只是与其他元素的差距。你甚至不能设置边距颜色，没有这样的事情。这意味着，每当您在示例中设置剩余边距时，您的绿色元素都是可见的（以前由月份覆盖）。由于z指数值，月份处于顶部。很高兴我提供了帮助。您是否成功地将其集成到您的项目中？