我正在尝试为 <p> 制作动画标记其兄弟 <input>的focus但这行不通。
我制作了一个codepen，如下。
我也不想使用 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; }
最佳答案
它不起作用，因为 ~选择器以其他方式工作。它选择主选择器之后的所有同级选择器。在你的情况下<p>出现在 <input> 之前.
要使其正常工作，您应该在 html 中进行一些替换:
<div class="textField">
<input type="text" name="username"/>
<p id="username">Username</p>
</div>
我知道这可能会破坏布局，但您可以使用 position: absolute;修复它。
关于html - CSS 兄弟选择器没有动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46362732/