跨度当输入集中

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

将您<span>。

务必：

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

希望这有助于！

Answer 2

你给你的跨度opacity: 0，所以它不会显示出来。

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

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

Answer 3

指定+这意味着输入，然后<input>后场跨越这样

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