输入聚焦时间距不显示

Question

 .email-input-container>span{
  background-color: red;
  position: absolute;
  left: 10px;
  transform: translateY(-20px);
  opacity: 0;
  transition: all 0.3s ease;
 }



input:focus + span{
  opacity: 1;
}

此处链接到完整代码：

http://codepen.io/Drew69/pen/gLgvxJ

Answer 1

您已经给出了opacity: 0，因此它没有显示出来。

+选择器适用于被调用元素之后的元素。看到这里：

http://www.w3schools.com/cssref/sel_element_pluss.asp

Answer 2

你指定+表示输入，然后像这样跨度

 <div class="email-input-container">
         <input type="email" placeholder="Email">
            <span>Email</span>
    </div>

Answer 3

将<span>放在<input>字段后面。

执行：

<div class="email-input-container">
  <input type="email" placeholder="Email">
  <span>Email</span>
</div>

而不是：

<div class="email-input-container">
    <span>Email</span>
  <input type="email" placeholder="Email">
</div>

希望这有帮助！