&：专注于输入不会改变元素

Question

我正在尝试在键入input标记后显示一个按钮。目前，我将按钮设置为display: none，当我专注于输入字段时，它应该更改我的display: inline-block，这应该会使它重新出现。我做错了什么？

html

<h1 className='title-caption'>Get started today!</h1>
<div className='email-newsletter-container'>
<p className='sign-up-caption'>
Sign up for our newletter for more information
</p>
<input
className='email-input'
placeholder='Enter email address'
></input>
<br />
<button className='submit-button' id='submit-button'>
Submit
</button>
</div>

css

.email-input {
margin-top: 20px;
height: 40px;
width: 400px;
text-align: center;
border-radius: 5px;
border: none;
outline: none;
position: relative;
&:focus + .submit-button {
display: inline-block;
}
}
.email-input:focus + .submit-button {
display: inline-block;
}
.submit-button {
position: relative;
border-radius: 20px;
width: 90px;
margin-top: 15px;
padding: 10px 10px 10px 10px;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande',
'Lucida Sans', Arial, sans-serif;
background-color: transparent;
border: 2px solid white;
color: white;
display: none;
}

Answer 1

button {
display: none;
}
input:focus ~ button {
display: inline-block;
}

<input type="text">
<div></div>
<button>Button</button>

使用~选择器而不是+选择器。这里有一个小示范。

+选择器将只选择紧接在后面的同级，而~选择器将选择后面的任何同级，使用类选择器我们可以过滤这些同级。

Answer 2

如果你尝试这样的东西会怎么样演示

CSS

.email-input {
margin-top: 20px;
height: 40px;
width: 400px;
text-align: center;
border-radius: 5px;
border: none;
outline: none;
position: relative;
&:focus + .submit-button {
display: inline-block;
}
}
.email-input:focus + .submit-button {
display: inline-block;
}
.submit-button {
position: relative;
border-radius: 20px;
width: 90px;
margin-top: 15px;
padding: 10px 10px 10px 10px;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande',
'Lucida Sans', Arial, sans-serif;
background-color: transparent;
border: 2px solid white;
color: white;
display: none;
}

HTML

<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script>
<h1 className='title-caption'>Get started today!</h1>
<div className='email-newsletter-container'>
<p className='sign-up-caption'>
Sign up for our newletter for more information
</p>
<input
className='email-input'
placeholder='Enter email address'
onfocus="myFunction()"

></input>
<br />
<button style="display:none" className='submit' id="myDIV">
Submit
</button>
</div>

Answer 3

• <input />标记是自关闭的。你的语法不正确。

• &:focus + .submit-button { display: inline-block; }-这意味着输入后会出现。submit buton，但在你的html中，输入后会有<br/>标签，所以不起作用