&:focus on input 不会改变元素
&:focus on input wont change element
我正在尝试在输入 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;
}
<input />
标签自动关闭。您的语法不正确。
&:focus + .submit-button { display: inline-block; }
- 这意味着在输入之后 .submit-buton 但是在你的 html 输入之后有 <br/>
标签,所以这将不工作
button {
display: none;
}
input:focus ~ button {
display: inline-block;
}
<input type="text">
<div></div>
<button>Button</button>
使用 ~
selector 而不是 +
selector。 Here的一个小示范。
+
selector 只会 select 兄弟姐妹紧随其后,而 ~
selector 会 select 任何sibling 放置在后面,使用 class select 或者我们可以过滤那些。
如果你尝试这样的事情会怎样
Demo
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>
我正在尝试在输入 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;
}
<input />
标签自动关闭。您的语法不正确。&:focus + .submit-button { display: inline-block; }
- 这意味着在输入之后 .submit-buton 但是在你的 html 输入之后有<br/>
标签,所以这将不工作
button {
display: none;
}
input:focus ~ button {
display: inline-block;
}
<input type="text">
<div></div>
<button>Button</button>
使用 ~
selector 而不是 +
selector。 Here的一个小示范。
+
selector 只会 select 兄弟姐妹紧随其后,而 ~
selector 会 select 任何sibling 放置在后面,使用 class select 或者我们可以过滤那些。
如果你尝试这样的事情会怎样 Demo
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>