CSS兄弟セレクタがアニメ化されていません

<p>タグを兄弟の<input>のfocusでアニメーションしようとしていますが、動作しません。CSS兄弟セレクタがアニメ化されていません

私はコードペローを作成しました。

私はまた解決のためにJavascriptを使いたくありません。

https://codepen.io/ItsBrianAgar/pen/YrGVxW?editors=0100

HTML

<html lang="en"></html> 
<head> 
    <meta charset="UTF-8"/> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/> 
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,700,900" rel="stylesheet"/> 
    <link href="assets/css/main.css" type="text/css" rel="stylesheet"/> 
    <title>myCoffee</title> 
</head> 
<body> 
    <main class="appContainer"> 
    <div class="app"> 
     <div class="sectionLogin"> 
     <div class="logo"><img src="assets/images/logo.svg" alt="logo"/></div> 
     <div class="inputLogin"> 
      <div class="textField"></div> 
      <div class="textField"> 
      <p id="username">Username</p> 
      <input type="text" name="username"/> 
      </div> 
      <div class="textField"> 
      <p id="password">Password</p> 
      <input type="password" name="password"/> 
      </div> 
     </div> 
     <div class="btnLogin"> 
      <button>LOGIN</button> 
     </div> 
     <div class="btnSignup"> 
      <button>SIGN UP</button> 
     </div> 
     </div> 
    </div> 
    </main> 
</body>

CSS

input[name="username"]:focus ~ #username { 
    perspective: 1000; 
    transform: translate3d(-50%, 30px, 0); 
    opacity: 0; 
    transition: all 150ms ease-out; } 
    input[name="password"]:focus ~ #password { 
    perspective: 1000; 
    transform: translate3d(-50%, 30px, 0); 
    opacity: 0; 
    transition: all 150ms ease-out; }

出典

2017-09-22 Brian Agar

~セレクタは、他の方法で動作しますので、それは動作しません。メインセレクタの後にとなるすべての兄弟を選択します。あなたの場合、より前に<p>が来ます。

<div class="textField"> <input type="text" name="username"/> <p id="username">Username</p> </div>

私はそれがレイアウトを破ることを知っているが、あなたはそれを修正するためにposition: absolute;を使用することができます：それはあなたが少しはあなたのhtmlに交換すべきで操作できるようにするに

。

出典

2017-09-22 10:48:18 voloshin

ありがとう：

は、ここでの作業のデモです！私の髪を取り除こうとしていた。 –

ようこそ。 Btw、別のセレクタを使ってこの作業を行うことができます（置き換えはまだ必要です）： 'input [name =" username "]：focus +＃username'。それは後に来る最初の兄弟を* only *を選択します。 – voloshin

+/を使用するには、p要素はinputの横になければなりません。

.box { 
 
padding: 30px; 
 
} 
 
.textField { 
 
position: relative; 
 
} 
 
input { 
 
padding: 10px; 
 
width: 200px; 
 
border-color: transparent transparent red transparent; 
 
outline: none; 
 
} 
 
p{ 
 
margin: 0; 
 
position: absolute; 
 
bottom: 3px; 
 
transition: all linear 0.25s; 
 
} 
 
input:focus + P { 
 
font-size: 12px; 
 
bottom: 30px; 
 
}

<div class="box"> 
 
<div class="textField"> 
 
<input type="text" name="password"/> 
 
<p id="password">Password</p> 
 
</div> 
 
</div>

出典

2017-09-22 10:54:29

CSS兄弟セレクタがアニメ化されていません

答えて

関連する問題