浅谈css当中:focus-within的好玩之处
发布时间:2020-09-07 17:11:57 作者:赵不悔 我要评论
这篇文章主要介绍了css中:focus-within,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
【 如果你想靠AI翻身,你先需要一个靠谱的工具! 】
相信有些人看到过这个B站输入密码就遮眼睛的这个图
这里我们用:focus-within玩一把
布局是这样的
外面有一个ctn 可以忽略,就是一个居中固定位置而已
xPassword在没点击之前里面的“suo”这个图是隐藏的
xPassword 同级屁股后的“r6m”此时是显示的
当我们一点击xPassword后同级第一张图‘r6m’隐藏
:focus-within ~ img的 ~ 这个符号是同级屁股后第一个的意思
同时xPassword里面的一张图‘suo’的这个display为显示!这时就成了你输密码我就装作看不见
1 2 3 4 5 6 7 8 9 10 | < div class = "ctn" > < div class = "xPassword" > < input type = "password" placeholder = "请输入密码" class = "input" > < img src = "http://suo.im/5UnnjN" alt = "" > </ div > < img src = "http://r6m.cn/csAC" alt = "" > </ div > |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | .ctn { position : relative ; width : 318px ; margin : 100px auto ; height : 370px ; padding : 20px ; box-sizing: border-box; background : #fff ; z-index : 10 ; box-shadow: 0 0 15px #cfcfcf ; } .ctn h 2 { font-size : 20px ; font-weight : bold ; margin-bottom : 30px ; } .ctn input { padding : 10px ; width : 100% ; border : 1px solid #e9e9e9 ; border-radius: 2px ; outline : none ; box-sizing: border-box; font-size : 16px ; } img { position : absolute ; top : -23% ; left : 50% ; width : 80px ; height : auto ; transform: translate( -50% , 0 ); } .xPassword img { display : none ; width : 103px ; height : auto ; top : -26% ; } //以上毫无价值,可以忽略,下方两个才是重点 .xPassword:focus-within ~ img { display : none ; } .xPassword:focus-within img { display : block ; } |
到此这篇关于浅谈css当中:focus-within的好玩之处的文章就介绍到这了,更多相关css :focus-within内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
相关文章
- 这篇文章主要介绍了CSS :focus-within的具体使用的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2017-09-18
最新评论