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;并不允许您转换它，它将永远不会存在。

从切换按钮开始在文本顶部移动时如何隐藏文本？

1 个答案: