CSS:focus-within让你脱离JS
CSS有很多有意思的东西，让以前必须要使用js才能完成的效果，现在使用一些css选择器就完成了，今天我们就来说说focus-within。
:focus-within能做什么？
这是一个css的伪类，根据名称就能知道是获取焦点事件，但是它不但可以获取元素本身，如果其后代元素获取了焦点，也将会触发这个样式。
下面我们来看代码：
<section class="container">
<table>
<tr>
<td>账号:</td>
<td><input type="text" id="name" placeholder="请填写您的账号" /></td>
</tr>
</table>
</section>css样式：
.container{
width:300px;
height:100px;
margin:100px auto;
transition:all .5s;
text-align:center;
border:1px solid #ccc;
}
table{
margin:30px auto;
}
.container:focus-within{
transform:translateY(-20px);
border:2px solid #000;
}我们来看看运行的效果
效果就是这样：当.container的后代元素input获取了焦点，:focus-within的样式就触发了。
可以使用css的其他选择器配合来应用其他样式，让我们脱离了JS就完成了，确实是很方便。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020年02月25日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读