我正在尝试在输入 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;
}
最佳答案
button {
display: none;
}
input:focus ~ button {
display: inline-block;
}
<input type="text">
<div></div>
<button>Button</button>
使用~
选择器而不是+
选择器。 Here这是一个小演示。
+
选择器只会选择紧随其后的同级,而 ~
选择器将选择后面放置的任何同级,然后使用类选择器我们可以过滤它们。
关于html - & :focus on input wont change element,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63868719/