当前位置: 首页 > Web前端 > CSS

css中:focus-within的乐趣

时间:2023-03-30 17:32:22 CSS

相信有些人看过这张输入密码后遮住眼睛的B站图吧。这里我们使用:focus-within来玩转布局。外面有个ctn,可以忽略。它只是在中心的一个固定位置。xPassword在点击之前在里面xPassword中隐藏了“suo”的图片。此时显示同级枪托后面的“r6m”。当我们点击xPassword的时候,同级的第一张图片'r6m'被隐藏了:focus-within~img~这个符号的意思是同级的屁股在显示的同时被显示后第一张的意思xPassword中的图片“suo”!这时候你输入密码我假装没看到。

.ctn{位置:相对;宽度:318px;边距:100px自动;高度:370px;填充:20px;框大小:边框框;背景:#fff;z-指数:10;;}.ctnh2{字体大小:20px;字体粗细:粗体;margin-bottom:30px;}.ctninput{padding:10px;宽度:100%;边框:1px实心#e9e9e9;边界半径:2px;大纲:无;框大小:边框框;字体大小:16px;}img{位置:绝对;顶部:-23%;左:50%;宽度:80px;高度:自动;转换:翻译(-50%,0);}.xPasswordimg{显示:无;宽度:103px;:-26%;}//上面没有价值可以忽略,下面两个是重点。xPassword:focus-within~img{display:none;}.xPassword:focus-withinimg{display:block;}love你怕我吗?