html - 如何在切换按钮的圆圈移动到文本顶部时隐藏文本？

Question

好吧，我完全不知道我该怎么做。如果标题不够清楚，让我更好地描述我想要完成的事情。

现在它显示公制并选中输入，一旦您单击切换按钮，白色圆圈将从右向左移动，我想隐藏文本，因为圆圈在移动时悬停在它上面从右到左而不是现在的隐藏方式。

帝国也是如此。

我正在努力掌握如何做到这一点，但我真的无法全神贯注。

.text { position: relative; top: 8px; padding: 0 7px;   font-size: 14px; }
input + .slider .off { display:none; }
input:checked + .slider .off { display:block; }
input + .slider .on { display:block; }
input:checked + .slider .on { display:none; }
.on { float: right; }
.switch { position: relative; display: inline-block; width: 100px; height: 34px; }
.switch input {display:none;}
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; }
.slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; }
input:checked + .slider { background-color: #eb974e; }
input:focus + .slider { box-shadow: 0 0 1px #eb974e; }
input:checked + .slider:before {-webkit-transform: translateX(64px); -ms-transform: translateX(64px); transform: translateX(64px); }
.slider.round { border-radius: 34px; }
.slider.round:before { border-radius: 50%; }

<label class="switch">
  <input type="checkbox" checked>
  <span class="slider round">
    <span class="text off">Metric</span>
    <span class="text on">Imperial</span>
  </span>
</label>

Answer 1

将文本更改为 Visibility: hidden; 或 Opacity: 0; 并制作 position: absolute; 这样它就不会干扰您的其他文本。对另一个做同样的事情，你应该能够设置淡入淡出的样式。

使用 Display: none; 不允许您转换它，它总是会突然消失。