跨度當輸入集中

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>