CSS:focus-within让你脱离JS

浏览量:362 focus-within

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就完成了,确实是很方便。

如无作者授权,请勿转载。

评论区:

昵称:
内容:
验证码:  3897

QQ群:477600139

今日头条:前端开发梦工厂

腾讯云社区:小明爱学习

微信公众号:霓虹国的佛系少年